Search code examples
angulartypescriptapexcharts

Is there a way to remove the bubble box at the bottom of a line chart in ApexCharts?


Haven't found a way to remove or hide the bubble box at the bottom of the line chart whenever it is hovered. Already checked the documentation and I still didn't found it, or I was just missing something. Sorry for the question, still a beginner when it comes to Angular and using apexcharts.

Heres the sample: https://codesandbox.io/s/apx-line-basic-forked-iltgss?file=/src/app/app.component.html

Picture of what I want 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>

Solution

  • Disable tooltip in xaxis https://apexcharts.com/docs/options/xaxis/#tooltip

      tooltip: {
          enabled: false,
      },