Apexcharts tooltip - how to add extra data for candlestick chart?

Question

Is there a way to pass extra data to dataset and to display it in tooltip for apexcharts candlestick ?

I cannot find example in docs : https://apexcharts.com/docs/options/tooltip/#custom

I would like to display tooltip like :

• Open: xx.xx
• High: xx.xx
• Low: xx.xx
• Close: xx.xx
• extra_1: xx.xx
• extra_2: xx.xx
• extra_3: xx.xx
• exta_4: xx.xx

Answer 1

I got it finally...

So, for Apexcharts candlestick chart - if you want to provide extra data and display it on tooltip :

• pass data to dataset as description

  {
    x: new Date(t),
    y: [o, h, l, c],
    description: {
      call_ask1: call_ask1,
      call_ask2: call_ask2,
      call_bid1: call_bid1,
      call_bid2: call_bid2,
      put_ask1: put_ask1,
      put_ask2: put_ask2,
      put_bid1: put_bid1,
      put_bid2: put_bid2,
      expiry1: expiry1,
      expiry2: expiry2,
    },
  }
  

• tooltip shoul have custom function to display extra data :

   options.tooltip = {
    custom: function (opts) {
    const desc = opts.ctx.w.config.series[opts.seriesIndex].data[opts.dataPointIndex].description;
    // candlestick standard
    const open = opts.series[opts.seriesIndex][opts.dataPointIndex];
    const high = opts.series[opts.seriesIndex][opts.dataPointIndex + 1];
    const low = opts.series[opts.seriesIndex][opts.dataPointIndex + 2];
    const close = opts.series[opts.seriesIndex][opts.dataPointIndex + 3];
    // Extra tooltip data
    const call_ask1 = desc.call_ask1;
    const call_bid1 = desc.call_bid1;
    const put_ask1 = desc.put_ask1;
    const put_bid1 = desc.put_bid1;
    const expiry1 = new Date(desc.expiry1);
  
    const call_ask2 = desc.call_ask2;
    const call_bid2 = desc.call_bid2;
    const put_ask2 = desc.put_ask2;
    const put_bid2 = desc.put_bid2;
    const expiry2 = new Date(desc.expiry2);
  
    let text = "Open : " + open + "<br>";
    text += "High : " + high + "<br>";
    text += "Low : " + low + "<br>";
    text += "Close : " + close + "<br>";
    text += "<br>";
    text += "Call Ask 1 : " + call_ask1 + "<br>";
    text += "Call Bid 1 : " + call_bid1 + "<br>";
    text += "Put Ask 1 : " + put_ask1 + "<br>";
    text += "Put Bid 1 : " + put_bid1 + "<br>";
    text += "Straddle 1 : <br>";
    text +=
      "Days to exp 1 : " +
      Math.ceil(Math.abs(expiry2 - expiry1) / (1000 * 60 * 60 * 24)) +
      "<br>";
  
    text += "<br>";
    text += "Call Ask 2 : " + call_ask2 + "<br>";
    text += "Call Bid 2 : " + call_bid2 + "<br>";
    text += "Put Ask 2 : " + put_ask2 + "<br>";
    text += "Put Bid 2 : " + put_bid2 + "<br>";
    text += "Straddle 2 : <br>";
    text +=
      "Days to exp 2 : " +
      Math.ceil(Math.abs(expiry2 - expiry1) / (1000 * 60 * 60 * 24)) +
      "<br>";
  
    return text;
  },
  fillSeriesColor: false,
  theme: "dark",
  x: {
    show: true,
    format: "dd MMM yyyy",
  },
  fixed: {
    enabled: true,
    position: "topLeft",
    offsetX: 0,
    offsetY: 0,
  },
  

  };