Chart.js - add data to line chart from clicking pie chart segment

Question

I have 2 charts set up - one is a pie chart with an onClick action, the other is an empty line chart. I am currently using random data to populate the charts. What I'm trying to do is generate random data for the line chart by clicking on the pie chart segment. I'm also trying to pass the label of the pie chart segment to the line chart so the generated data has the same label as what was clicked. Here is my code so far:

//Pie Chart
var ctx = document.getElementById("trackingPie2").getContext("2d");
var selectedIndex = null;
window.trackingPie2 = new Chart(ctx, {
  type: "doughnut",
  data: pieChartData2,
  options: {
    responsive:false,
    maintainAspectRatio: false,
    title: {
        display: true,
        text: ["Dataset1"]
    },
    legend: {
        position: 'bottom'
    },
    onClick: function (evt, elements) {
        if (elements && elements.length) {
            var segment = elements[0];
            trackingPie2.update();
            if (selectedIndex !== segment["_index"]) {
                selectedIndex = segment["_index"];
                segment._model.outerRadius += 10;
            }
            else {
                selectedIndex = null;
            }
        }
    },
    layout: {
        padding: 0
    }
  }
});

//Line Chart
var config = {
type: "line",
data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August'],        
},
options: {
  responsive:true,
  maintainAspectRatio: true,
  title: {
    display: true,
    text: 'Dataset 2'
  },
  legend: {
    position: 'bottom'
  }
}
};
var ctx = document.getElementById("linePieChart").getContext("2d");
window.linePieChart1 = new Chart(ctx, config);
var colorNames = Object.keys(window.chartColors);
document.getElementById('trackingPie2').onClick = function(evt) {
  var activePoints = trackingPie2.getSegmentsAtEvent(evt);
  if(Object.keys(activePoints).length > 0) {
    var label = activePoints[0]['label'];
  }
  var colorName = colorNames[config.data.datasets.length % colorNames.length];
  var newColor = window.chartColors[colorName];
  var newDataset = {
    label: label,
    backgroundColor: newColor,
    borderColor: newColor,
    data: [],
    fill: false
  };

  for (var index = 0; index < config.data.labels.length; ++index) {
    newDataset.data.push(randomScalingFactor());
  }

  config.data.datasets.push(newDataset);
  window.linePieChart1.update();
};

I click the pie chart and nothing happens, but I'm not getting any console errors. I can't seem to see where the issue is.

Any help is much appreciated.

NewMike NewMike · Accepted Answer · 2018-08-30T15:44:18

I managed to solve this issue my self by using the following code in the click function of the pie chart:

var activePoints = window.trackingPie2.getElementsAtEventForMode(evt, 'point', 
window.trackingPie1.options);
var firstPoint = activePoints[0];
var label = window.trackingPie2.data.labels[firstPoint._index];

I added "window." to the call to the pie chart and used "getElementsAtEventForMode' instead of "getElementAtEvent" to get pull in the data.

Chart.js - add data to line chart from clicking pie chart segment

1 Answers