how to make a custom tooltip in angular using apexcharts for bubble chart

Question

i am trying to custom the tooltip in bubble chart of apexcharts library. https://codesandbox.io/s/apx-bubble-simple-q87t0?from-embed

Answer 1

According to their docs it is posible to add a custom tooltip to the chart

based on the docs: https://apexcharts.com/docs/options/tooltip/#custom

try this

component.ts

create a property in the chartoptions model callled tooltip

export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  xaxis: ApexXAxis;
  yaxis: ApexYAxis;
  title: ApexTitleSubtitle;
  fill: ApexFill;
  dataLabels: ApexDataLabels;
  tooltip:any // to be simple I made it as any, can be replaced with the proper className
};

Add your custom tooltip function

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

and in the html add this function as well to the input of the component

<!--The content below is only a placeholder and can be replaced.-->
<div id="chart">
  <apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [xaxis]="chartOptions.xaxis"
    [fill]="chartOptions.fill"
    [dataLabels]="chartOptions.dataLabels"
    [title]="chartOptions.title"
    [yaxis]="chartOptions.yaxis"
    [tooltip]="chartOptions.tooltip" // This line will add the tooltip 
  ></apx-chart>
</div>

Sources https://apexcharts.com/docs/angular-charts/ https://apexcharts.com/docs/options/tooltip/