Embed Unique Identifier In Chart.js Segments?

I want to make my pie-chart interactive by allowing the user to double-click on a slice to drill down. I believe that the way to do this is to create an onclick handler on the canv

Solution 1:

You would need to either override the pie chart or create a new chart type that inherits from pie.

Here is an example of a new chart type, i have passed a new attribute called id and then the only thing that needs to be different in this chart is that when the data is being added this id needs to passed to the chart

Chart.types.Pie.extend({
    name: "PieUnique",
    addData: function (segment, atIndex, silent) {
        var index = atIndex || this.segments.length;
        this.segments.splice(index, 0, newthis.SegmentArc({
            value: segment.value,
            outerRadius: (this.options.animateScale) ? 0 : this.outerRadius,
            innerRadius: (this.options.animateScale) ? 0 : (this.outerRadius / 100) * this.options.percentageInnerCutout,
            fillColor: segment.color,
            highlightColor: segment.highlight || segment.color,
            showStroke: this.options.segmentShowStroke,
            strokeWidth: this.options.segmentStrokeWidth,
            strokeColor: this.options.segmentStrokeColor,
            startAngle: Math.PI * this.options.startAngle,
            circumference: (this.options.animateRotate) ? 0 : this.calculateCircumference(segment.value),
            label: segment.label,
            //add option passedid: segment.id
        }));
        if (!silent) {
            this.reflow();
            this.update();
        }
    },
});

var pieData = [{
    value: 300,
    color: "#F7464A",
    highlight: "#FF5A5E",
    label: "Red",
    id: "1-upi"
}, {
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green",
    id: "2-upi"
}, {
    value: 100,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow",
    id: "3-upi"
}, {
    value: 40,
    color: "#949FB1",
    highlight: "#A8B3C5",
    label: "Grey",
    id: "4-upi"
}, {
    value: 120,
    color: "#4D5360",
    highlight: "#616774",
    label: "Dark Grey",
    id: "5-upi"
}

];


var ctx = document.getElementById("chart-area").getContext("2d");
window.myPie = newChart(ctx).PieUnique(pieData);

document.getElementById("chart-area").onclick = function (evt) {
    var activePoints = window.myPie.getSegmentsAtEvent(evt);
    //you can now access the id at activePoints[0].idconsole.log(activePoints);


};

<scriptsrc="https://raw.githack.com/leighquince/Chart.js/master/Chart.js"></script><canvasid="chart-area"width="400"></canvas>

Solution 2:

To get an slice that was clicked on, getElementAtEvent can be used. Worked for me!

stackedBar(datasets) {
    var c = $("#canvas-bar");
    var ctx = c[0].getContext("2d");
    let __this = this;
    this.chart = newChart(ctx, {
      type: 'bar',
      data: {
        labels: ["something"],
        datasets: datasets,
      },
      options: {
        onClick: function (e, item) {
          __this.onClickAction(e, item);
        },
        title: {},
        legend: {},
        scales: {}
      }
    });
  }

 onClickAction(event, elements) {
    if (elements && elements.length) {
      let selected = this.chart.getElementAtEvent(event)[0];
      let sliceIndex = selected['_datasetIndex'];
    }
  }