How to remove tooltip items to Apexcharts?

Question

I am trying to remove the tooltip from a chart in apexchart, but I did not succeed.

I read the documentation but I could not remove the tooltip.

more details in the image.

enter image description here

my code here.

DEMO APEXCHARTS.

import { Component, ViewChild, Input } from "@angular/core";
import {
  ApexAxisChartSeries,
  ApexChart,
  ChartComponent,
  ApexDataLabels,
  ApexPlotOptions,
  ApexYAxis,
  ApexXAxis,
  ApexTitleSubtitle,
  ApexStroke
} from "ng-apexcharts";

export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  dataLabels: ApexDataLabels;
  plotOptions: ApexPlotOptions;
  colors: Array<Function>;
  fill: Object;
  yaxis: ApexYAxis;
  xaxis: ApexXAxis;
  title: ApexTitleSubtitle;
  stroke: ApexStroke;
};

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChild("chart")
  chart: ChartComponent | undefined;

  public chartOptions: Partial<ChartOptions>;

  firstLimit: number = 3195;
  secondLimit: number = this.firstLimit + 159;
  thirdLimit: number = this.secondLimit + 24;
  fourthLimit: number = this.thirdLimit + 14;
  fifthLimit: number = this.thirdLimit + 5;
  subtotal: number = 3195 + 159 + 24 + 14 + 5;

  constructor() {
    this.chartOptions = {
      series: [
        {
          data: [
            {
              x: "First Purchase",
              y: [0, this.firstLimit],
              meta: "3195"
            },
            {
              x: "Second Purchase",
              y: [this.firstLimit, this.secondLimit],
              meta: "159"
            },
            {
              x: "Third Purchase",
              y: [this.secondLimit, this.thirdLimit],
              meta: "24"
            },
            {
              x: "Fourth Purchase",
              y: [this.thirdLimit, this.fourthLimit],
              meta: "14"
            },
            {
              x: "Fifth and more Purchase",
              y: [this.fourthLimit, this.fifthLimit],
              meta: "5"
            },
            {
              x: "Subtotal",
              y: [0, this.subtotal],
              fillColor: "gray",
              meta: this.subtotal
            }
          ]
        }
      ],
      fill: {
        colors: ["#E91E63", "#9C27B0"]
      },
      chart: {
        type: "rangeBar",
        height: 350
      },
      plotOptions: {
        bar: {
          horizontal: false
        }
      },
      dataLabels: {
        enabled: true,
        formatter: function (value, { seriesIndex, dataPointIndex, w }) {
          return w.config.series[seriesIndex].data[dataPointIndex].meta;
        }
      }
    };
  }
}

I try to add custom tooltip but it doesn't work for me :(

tooltip: {
  custom: function({series, seriesIndex, dataPointIndex, w}) {
    return '<div class="arrow_box">' +
      '<span>' + series[seriesIndex][dataPointIndex] + '</span>' +
      '</div>'
  }
}

Can someone help me or guide me please?

Answer 1

Did you try using css?

.apexcharts-tooltip {
  display: none !important;
}