Apexcharts.js: How to add custom tooltip to donut chart

[felixalguzman]

I want to add a array of tooltip to my donut chart. This is my chart

[junedchhipa]

Sorry, I don't get your question correctly.
Can you please elaborate what are you trying to accomplish?

[felixalguzman]

I want to display some text instead of the default that is series. For each value in donut chart I have a text that i want to present as a tooltip

Something like this

[junedchhipa]

You can use label formatters to modify the text instead of displaying the default one.
See the example

You will need to set

tooltip: {
  y: {
    formatter: function(value) {
      return value + "your text";
    }
  }
}

[felixalguzman]

ok that would work. Is it possible to remove the series name?

[junedchhipa]

Yes, but with CSS :)
Check the same example I just updated

[felixalguzman]

Ok thanks

[junedchhipa]

I forgot that you can also do it without CSS display:none using tooltip.y.title.formatter function :)

tooltip: {
    y: {
      formatter: function(val) {
        return val + ".00" + " Rs"
      },
      title: {
        formatter: function (seriesName) {
          return ''
        }
      }
    }
  },

[DebasisBehera123]

Thanks @junedchhipa for above.

[anilreddy128]

but how to add dynamic data to tooltip? data can be there in dataset/json array.

[nuvenn]

tooltip: {
      custom: function({ series, seriesIndex, dataPointIndex, w }) {
        return "<div>" + series + "</div>";
      }
 },

[juanccamachob94]

I forgot that you can also do it without CSS display:none using tooltip.y.title.formatter function :)

tooltip: {
    y: {
      formatter: function(val) {
        return val + ".00" + " Rs"
      },
      title: {
        formatter: function (seriesName) {
          return ''
        }
      }
    }
  },

It works to items of tooltip. I would like to change the tooltip title. I managed to do it, following the pattern of your code. Thank you very much

x: { formatter: function(x){ x + "changed" } }