Chart.js: pie chart selected effect

[hon]

I am using the react version of this lib.
I want this effect: if I selected a part of the pie, the selected part will move a little out from the center.
Is there an option to do that?
Thanks.

[wadacoder]

Agreed, explodable pie slices or explode the selected slice is a very much needed feature. I am able to create a drilldown effect by editing the segments, but not the radius or stokeWidth.

[mikabuka]

+1

[etimberg]

Closing: We will not implement this in the core at this time. I'm happy to help someone develop a plugin to achieve this functionality.

The plugin would need to do the following:

1. Add something to the segment that is selected
2. Trigger an update of the chart
3. Adjust the x,y coordinate of the selected arc only after the update has finished (using afterDatasetsUpdate plugin call)

[wadacoder]

I would very much like to write this plugin.
Is there documentation somewhere on how to write a Chart.js plugin? The basic documentation at http://www.chartjs.org/docs/#advanced-usage-creating-plugins doesn't quite help

[etimberg]

@wadacoder there isn't much documentation at the moment but we do have some samples:

https://github.com/chartjs/Chart.Zoom.js
https://github.com/chartjs/Chart.Annotation.js

[lkwfahrer]

It's not a plug-in, just a quick js function (for anyone who needs the explode effect quick): link.
Please feel free to correct it.

[wadacoder]

@lkwfahrer the jsfiddle link doesn't work

[lkwfahrer]

@wadacoder , sorry, updated now: link

[greatromul]

@lkwfahrer, there is a problem with edge of pie. Exploded pie slice is cut by canvas border. Click blue slice for example.
I don't know any way to create reserve space between pie and canvas border. Pie always is inscribed in canvas. I guess, it is impossible. Such question has been answered already.

[lkwfahrer]

Agreed, I'm aware of the problem, my solution is just a quick workaround and has more problems. Ideally just having a pie chart option to switch the explode effect on/off would be perfect.
For this workaround I was thinking to reduce the radius of the whole pie once it's loaded (similarly to how it's done once a piece is clicked), but I haven't yet looked into that.

[greatromul]

@lkwfahrer, #3476 fixed it. So, there is option for layout padding:

options: {
  layout: {
    padding: 10
  }
}

I've made plunk to demonstrate it.

@hon, you can write this code to solve your task:

var ctx = document.getElementById("myChart");
var selectedIndex = null;
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["Honey", "Milk", "Sugar"],
        datasets: [
            {
                data: [300, 50, 100],
                backgroundColor: [
                    "#FFCE56",
                    "#36A2EB",
                    "#FF6384"

                ],
                hoverBackgroundColor: [
                    "#EEBD47",
                    "#2591DA",
                    "#EE5273"
                ]
            }]
    },
    options: {
        onClick: function (evt, elements) {
            if (elements && elements.length) {
                var segment = elements[0];
                myChart.update();
                if (selectedIndex !== segment["_index"]) {
                    selectedIndex = segment["_index"];
                    segment._model.outerRadius += 10;
                }
                else {
                    selectedIndex = null;
                }
            }
        },
        layout: {
            padding: 30
        }
    }
});

[yoerivdm]

If it's of any value, i created a pie with 'exploded' slice and dropshadow.
Created a new chart type and modified pie update methods and Arc draw.

https://codepen.io/yoeri/pen/YxewjY?editors=0010

[dovk]

Is there an option to have all the slices selected programmatically so that depending on the case the inital view would show all labels on - this could be easier on the eye that looking down at the legen and back up to the pie, or having to press on each slice to understand what each one represents.

[galabra]

I found a more general solution that creates this effect statically (without clicking the graph).
You can easily re-purpose it:
https://stackoverflow.com/a/57291638/3103891