如何在 ng-apexchart 中禁用工具提示

Question

I am integrating apex chart in my angular app, implementing apex line chart. I want to hide the tool-tip tried with option enabled: false. but not working. even not able to set custom tool-tip to line chart. when hover on series it is displaying some dashed vertical line, I need to hide the tool-tip or hide the dashed vertical line & create custom tool-tip.

any suggestion would be very helpful. Thank you.

 import { Component, ViewChild, OnInit } from '@angular/core'; import { ChartComponent, ApexAxisChartSeries, ApexChart, ApexXAxis, ApexDataLabels, ApexTitleSubtitle, ApexStroke, ApexGrid, ApexLegend, ApexTooltip, ApexYAxis, } from 'ng-apexcharts'; export interface ChartOptions { series: ApexAxisChartSeries; chart: ApexChart; xaxis: ApexXAxis; yaxis: ApexYAxis; dataLabels: ApexDataLabels; grid: ApexGrid; stroke: ApexStroke; title: ApexTitleSubtitle; legend: ApexLegend; tooltip: ApexTooltip; } @Component({ selector: 'app-line-chart', templateUrl: './line-chart.component.html', styleUrls: ['./line-chart.component.css'], }) export class LineChartComponent implements OnInit { @ViewChild('lineChart') lineChart: ChartComponent; public chartOptions: Partial<ChartOptions>; constructor() {} ngOnInit(): void { this.chartOptions = { series: [ { name: 'Desktops', data: [10, 41, 35, 51, 49, 62, 69, 91, 148], }, { name: 'Laptops', data: [22, 55, 66, 77, 88, 99, 90, 110, 170], }, ], chart: { height: 350, type: 'line', zoom: { enabled: false, }, toolbar: { tools: { download: false, }, }, }, dataLabels: { enabled: false, }, stroke: { curve: 'straight', }, grid: { row: { colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns opacity: 0.5, }, }, yaxis: { tooltip: { enabled: false, }, }, xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], tooltip: { enabled: false, }, }, legend: { show: false, onItemClick: { toggleDataSeries: false, }, onItemHover: { highlightDataSeries: false, }, }, tooltip: { enabled: false, enabledOnSeries: undefined, marker: { show: false, } } }; } }

 <apx-chart [series]="chartOptions.series" [chart]="chartOptions.chart" [xaxis]="chartOptions.xaxis" [dataLabels]="chartOptions.dataLabels" [grid]="chartOptions.grid" [stroke]="chartOptions.stroke" [title]="chartOptions.title" #lineChart ></apx-chart>

Answer 1

You are missing the tooltip attribute in your component

<apx-chart
  ...
  [tooltip]="chartOptions.tooltip"
  #lineChart
></apx-chart>