Is there a way to get rid of or hide the bubble box that appears at the bottom of the line chart when it is hovered over? I have checked the documentation but couldn't find a solution. Apologies for the question, as I am still a beginner in Angular and using apexcharts.
Here is an example: https://codesandbox.io/s/apx-line-basic-forked-iltgss?file=/src/app/app.component.html
Image of what I am trying to remove: https://i.sstatic.net/8WUoB.jpg
app.component.ts
import { Component, ViewChild } from "@angular/core";
import {
ChartComponent,
ApexAxisChartSeries,
ApexChart,
ApexXAxis,
ApexYAxis,
ApexStroke,
ApexGrid,
ApexFill,
ApexTooltip
} from "ng-apexcharts";
export type ChartOptions = {
series: ApexAxisChartSeries;
chart: ApexChart;
xaxis: ApexXAxis;
yaxis: ApexYAxis;
grid: ApexGrid;
stroke: ApexStroke;
fill: ApexFill;
tooltip: ApexTooltip;
};
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
@ViewChild("chart") chart: ChartComponent;
public chartOptions: Partial<ChartOptions>;
constructor() {
this.chartOptions = {
series: [
{
name: "",
data: [2, 10, 18, 22, 36, 15, 47, 75, 65, 19, 14, 2, 47, 42, 15]
}
],
chart: {
height: 350,
type: "line",
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
stroke: {
curve: "smooth"
},
grid: {
show: false
},
xaxis: {
labels: {
show: false
},
axisBorder: {
show: false
}
},
yaxis: {
show: false
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
gradientToColors: ["#5156be"],
shadeIntensity: 1,
type: "horizontal",
opacityFrom: 1,
opacityTo: 1,
stops: [100]
}
},
tooltip: {
enabled: true,
followCursor: false,
marker: {
show: false
},
x: {
show: false
},
y: {
formatter: undefined,
title: {
formatter: (seriesName) => seriesName
}
}
}
};
}
}
HTML
<div id="chart">
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[xaxis]="chartOptions.xaxis"
[yaxis]="chartOptions.yaxis"
[grid]="chartOptions.grid"
[stroke]="chartOptions.stroke"
[fill]="chartOptions.fill"
[tooltip]="chartOptions.tooltip"
></apx-chart>
</div>