Блог

я пытаюсь настроить всплывающую подсказку в пузырьковой диаграмме библиотеки apexcharts. https://codesandbox.io/s/apx-bubble-simple-q87t0?from-embed

Согласно их документам, возможно добавить пользовательскую всплывающую подсказку к диаграмме

на основе документов:https://apexcharts.com/docs/options/tooltip/#custom

попробуйте это

component.ts

создайте свойство в модели chartoptions, вызывающее всплывающую подсказку

 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
};
  

Добавьте свою пользовательскую функцию всплывающей подсказки

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

и в html добавьте эту функцию также во входные данные компонента

 <!--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>
  

Источники
https://apexcharts.com/docs/angular-charts/
https://apexcharts.com/docs/options/tooltip/