Create a pie chart in chart js with labels

Question

I'm trying to create a pie chart using chart js. my data is as below.

data: {
    labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red"],
    datasets: [{
      backgroundColor: ["#7ECFA2", "#866B42", "#77FF81", "#F127F8", "#9647BC", "#74CB15"],
      data: [2, 9, 2, 1, 1, 1]
    }]
  }

using this data I'm able to create a pie chart. But here my requirement is Instead of hovering the pie pieces, is there a way that I can directly display the label within the pie piece. Here is my current working fiddle.

I don't mind if the legend is disabled, if I'm getting the legend values on the pie chart itself.

Please let me know on how can I get it.

Thanks

what will happen if the pie piece is too small to fit the label? — Vencovsky, Feb 25 '19 at 11:12
probably were answered here https://stackoverflow.com/questions/42164818/chart-js-show-labels-on-pie-chart — Solonka, Feb 25 '19 at 11:14
Hi @Solonka, I don't want to use any other plugins, want to do it in default pace. Here is an updated fiddle https://jsfiddle.net/zqrwnv73/ . Can you please have a look into it? Thanks — Rakesh K, Feb 25 '19 at 12:04

Moj · Accepted Answer · 2019-02-26T11:08:26.817

This github issue is about how to always show tooltips in chart js V2.

https://github.com/chartjs/Chart.js/issues/1861

You need to create a plugin for your chart. For more complete answer I just copy the code from the jsfiddle in the above link. Considering you have your chart in your html:

<canvas id="canvas"></canvas>

Then you make the data and also plugin for you chart:

    var ctx = document.getElementById("canvas").getContext("2d");

    var data = {
        labels: [
            "Red",
            "Green",
            "Yellow"
        ],
        datasets: [
            {
                data: [300, 50, 100],
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ]
            }]
    };

    Chart.pluginService.register({
        beforeRender: function (chart) {
            if (chart.config.options.showAllTooltips) {
                // create an array of tooltips
                // we can't use the chart tooltip because there is only one tooltip per chart
                chart.pluginTooltips = [];
                chart.config.data.datasets.forEach(function (dataset, i) {
                    chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                        chart.pluginTooltips.push(new Chart.Tooltip({
                            _chart: chart.chart,
                            _chartInstance: chart,
                            _data: chart.data,
                            _options: chart.options.tooltips,
                            _active: [sector]
                        }, chart));
                    });
                });

                // turn off normal tooltips
                chart.options.tooltips.enabled = false;
            }
        },
        afterDraw: function (chart, easing) {
            if (chart.config.options.showAllTooltips) {
                // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
                if (!chart.allTooltipsOnce) {
                    if (easing !== 1)
                        return;
                    chart.allTooltipsOnce = true;
                }

                // turn on tooltips
                chart.options.tooltips.enabled = true;
                Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
                    tooltip.initialize();
                    tooltip.update();
                    // we don't actually need this since we are not animating tooltips
                    tooltip.pivot();
                    tooltip.transition(easing).draw();
                });
                chart.options.tooltips.enabled = false;
            }
        }
    })

    var myPieChart = new Chart(ctx, {
        type: 'pie',
        data: data,
        options: {
            showAllTooltips: true
        }
    });

If you like to know more about how to create chart js plugins I found these links very helpful:

https://www.chartjs.org/docs/latest/developers/plugins.html

https://levelup.gitconnected.com/how-to-write-your-own-chartjs-plugin-e46199ae5734

https://blog.larapulse.com/javascript/creating-chart-js-plugins

Hi @Moj, unfortunately, this is not working for me, here is an updated fiddle https://jsfiddle.net/zqrwnv73/ — Rakesh K, Feb 25 '19 at 12:02
@Rakesh K Can you please try this: http://jsfiddle.net/tk31rehf/ Please let me know and I'll update my answer if it works for you. — Moj, Feb 25 '19 at 23:42

Create a pie chart in chart js with labels

1 Answers1