CODEWITHSUNDEEP
javascriptvue.jsapexcharts
kevlar
kevlar

Reputation: 1173

Can't change the tooltip y formatter in Apexcharts

I'm trying to do something that should be pretty trivial. I have a simple formatter method to change a number into a currency value. It works because you can see that the y axis values have been formatted to values like "$8,000". However, the tooltip y values are not formatted (as you can see in the picture). The documentation says that they should be formatted using the y axis formatter, which clearly isn't happening.

enter image description here

Even if I try a custom formatter, it seems to do nothing:

tooltip: {
  shared: false,
  intersect: true,
  x: {
    show: true,
  },
  y: {
    formatter: (y: any) => {
      return '$' + y;
    },
  },
},

The strange thing is that when I console.log(...) inside of that custom formatter, it prints once or twice, and only the Maximum value (e.g. 7380.69999999999) but not all five of the values like I would expect.

Relatedly, I can't get the tooltip x header to show. I'm setting it to true but it doesn't appear.

I'm using vue but I don't think that matters. Almost every other Apexchart option seems to work except for this one.

Upvotes: 0

Views: 1542

Answers (1)

Brian Fernandez
Brian Fernandez

Reputation: 318

Going through a bit in the code of apexcharts.js, I found this solution:

tooltip: {
    shared: false,
    intersect: true,
    custom: function({ seriesIndex, dataPointIndex, w }) {
      const minimum = w.globals.seriesCandleO[seriesIndex][dataPointIndex]
      const q1 = w.globals.seriesCandleH[seriesIndex][dataPointIndex]
      const median = w.globals.seriesCandleM[seriesIndex][dataPointIndex]
      const q3 = w.globals.seriesCandleL[seriesIndex][dataPointIndex]
      const maximum = w.globals.seriesCandleC[seriesIndex][dataPointIndex]

      return `<div class="apexcharts-tooltip-box apexcharts-tooltip-boxPlot">
        <div>Minimum: <span class="value">\$${minimum}</span></div>
        <div>Q1: <span class="value">\$${q1}</span></div>
        <div>Median: <span class="value">\$${median}</span></div>
        <div>Q3: <span class="value">\$${q3}</span></div>
        <div>Maximum: <span class="value">\$${maximum}</span></div>
      </div>`
    }
  }

Resulting in the following:
tooltip

Demo in codi.link

Upvotes: 2

Related Questions