How to add custom tooltip to donut chart

[apexcharts]

How to add custom tooltip to donut chart

[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";
    }
  }
}

[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 ''
        }
      }
    }
  },

[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" } }

[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

[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

[DebasisBehera123]

Thanks @junedchhipa for above.

[devinnogenio2]

`const options = {
        cutout: "75%",
        borderWidth: 0,
        responsive: true,
        onHover: (event, chartElement) => {
          const target = event.native ? event.native.target : event.target;
          target.style.cursor = chartElement[0] ? "pointer" : "default";
        },
        plugins: {
          legend: {
            position: "bottom",
            labels: {
              usePointStyle: true,
              pointStyle: "circle",
            },
          },
          tooltip: {
            y: {
              formatter: function (value) {
                return value + "%";
              },
            },
          },
        },
      };`

I added options like this but it's not working

[xyresicdarshan]

Hey,
I'm using Apexchart (StackedBarChart), I want to append the % sign in the hover value.

code is like this :
this.CategorySummaryChart = {
series: [{
name: "Completed",
data: this.completedQuestionsPercentage,
},
{
name: "NA",
data: this.naQuestionsPercentage,
},
{
name: "Overdue",
data: this.missedQuestionsPercentage,
},
],
chart: {
type: "bar",
height: 350,
stacked: true,
stackType: "100%",
width: '98%',
toolbar: {
show: false,
},
},
tooltip: {
y: {
formatter: function (value) {
return value + "%";
},
},
},
/* plotOptions: {
bar: {
columnWidth: '20',
},
}, */
responsive: [{
breakpoint: 900,
options: {
chart: {
type: "bar",
height: 350,
},
},
},],
xaxis: {
categories: this.categoryNames,
},
fill: {
opacity: 1,
},
legend: {
show: false,
position: "top",
offsetX: -20,
offsetY: 10,
horizontalAlign: 'right',
markers: {
radius: 12,
offsetY: 1,
},
onItemClick: {
toggleDataSeries: false,
},
onItemHover: {
highlightDataSeries: false
},
},
colors: this.colors,
};
}

Expected Ouput - something like this