Candlestick Tooltip Customize

[ninjamonz]

Codepen

https://codepen.io/esdegan/pen/mddEqJj

Explanation

• What is the behavior you expect? customizing candlestick tooltip, for example adding suffix like Open: 123 U$D
• What is happening instead?

  tooltip: {
    x: {
        show: true,
        format: 'dd MMM',
        formatter: undefined,
    },
    y: {
        formatter: undefined,
        title: {
            formatter: (seriesName) => seriesName,
        },
    },
    z: {
        formatter: undefined,
        title: 'Size: '
    }
  }

  Tooltip property can be used for customizing charts with types such as 'line' and 'area', and possibly others, but it appears not to work for 'candlestick' charts.

I don't know what happen, any clue or help? Thanks Q(^_^)Q

[junedchhipa]

The candlestick tooltip is customizable with the tooltip.custom function. Here is the example

tooltip: {
  custom: function({ seriesIndex, dataPointIndex, w }) {
    const o = w.globals.seriesCandleO[seriesIndex][dataPointIndex]
    const h = w.globals.seriesCandleH[seriesIndex][dataPointIndex]
    const l = w.globals.seriesCandleL[seriesIndex][dataPointIndex]
    const c = w.globals.seriesCandleC[seriesIndex][dataPointIndex]
    return (
      '<div class="apexcharts-tooltip-candlestick">' +
      '<div>Open: <span class="value">' +
      o +
      '</span></div>' +
      '<div>High: <span class="value">' +
      h +
      '</span></div>' +
      '<div>Low: <span class="value">' +
      l +
      '</span></div>' +
      '<div>Close: <span class="value">' +
      c +
      '</span></div>' +
      '</div>'
    )
  }
}

[tolgaatrgt]

Hey Juned, i couldnt manage it what is the up to date solution ? Thank you..

[junedchhipa]

@tolgaatrgt What have you tried?

[tolgaatrgt]

Sorry, my fault thanks !

[Pablo-Yadav]

thanks for sharing, it helped