如何在 React 的 Apex 图表中定义自定义工具提示？

Question

I am defining four lines chart with Apex Chart. My data series:

series: [
            {
              name: "first",
              data: [28, 29, 33, 36, 32, 32, 33]
            },
            {
              name: "second",
              data: [12, 11, 14, 18, 17, 13, 13]
            },
            {
                name: "third",
                data: [48, 29, 33, 16, 32, 62, 3]
              },
              {
                name: "forth",
                data: [22, 11, 54, 18, 27, 53, 13]
              }
        ],

I want my tooltip output to be like:

first-label : {series.dataOfFirstLabel}

second-label : {series.dataOfSecondLabel}

third-label : {series.dataOfThirdLabel}

forth-label : {series.dataOfForthLabel}

How can I define my custom tooltip? Thanks.

Answer 1

In chart options

enter code here
tooltip: {
  enabled: true,
  enabledOnSeries: true,
  shared: true,
  followCursor: true,
  intersect: false,
  inverseOrder: false,
  custom: undefined,
  fillSeriesColor: true,
  theme: false,
  style: {
    fontSize: "12px",
    fontFamily: undefined,
  },
  onDatasetHover: {
    highlightDataSeries: false,
  },
  x: {
    show: true,
    format: "dd MMM",
    formatter: undefined,
  },
  y: {
    show: false,
    formatter: undefined,
    title: {
      formatter: (seriesName) => seriesName,
    },
  },
  z: {
    formatter: undefined,
    title: "Size: ",
  },
  marker: {
    show: false,
  },
  items: {
    display: "flex",
  },
  fixed: {
    enabled: false,
    position: "topRight",
    offsetX: 0,
    offsetY: 0,
  },
},
//sh

you can add these properties refer - https://apexcharts.com/docs/options/tooltip/

Answer 2

Try this:

tooltip: {
  custom: function (series: any) { 
 return `<div>
                                ${series.map((el: any) => {
                                            return `<div class="d-flex  flex-    column"> 
                                                <p>${el.name}-label:${el.data.map((element: any)=>element).join("")}</p> </div>`; })  
                             </div>`},}

https://codepen.io/apexcharts/pen/NBdyvV