CODEWITHSUNDEEP
javascriptbuttonchart.js
kalahari
kalahari

Reputation: 974

how to make doughnut chart portions, buttons

I have a doughnut chart made by Chart.js. When my mouse comes over a portion, the portion label appears such as RED: 300.

What I want is to show this label in the middle when I click it.

I have the code to write in the middle, but I need to know how to make portions to behave as buttons.

Upvotes: 1

Views: 121

Answers (1)

jcuenod
jcuenod

Reputation: 58425

I think you're looking for the getSegmentsAtEvent(evt) method.

canvas.onclick = function(evt){
    var activePoints = myDoughnutChart.getSegmentsAtEvent(evt);
    // => activePoints is an array of segments on the canvas that are at the same position as the click event.
};

If activePoints is empty, that means you can just return because no segment was clicked. Otherwise, go ahead and draw your tooltip.

Upvotes: 2

Related Questions