ChartJS: Get value from another another Chart

Question

I have two charts, First chart shows the breakup of Shirt sales. Second is the comparison of Blue Shirt vs Blue Trouser sales.

I want to import the Blue Shirt value from the first Chart to Second chart.

Here is the Code with two charts:

var ctx = document.getElementById("myChart1").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
    label: 'Shirts',
    data: [10, 10, 15, 5, 2, 3],
    backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
    ],
    borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
    ],
    borderWidth: 1
}]
},
options: {
scales: {
    yAxes: [{
        ticks: {
            beginAtZero:true
        }
    }]
},
}
});

var ctx = document.getElementById("myChart2").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Blue Shirts", "Blue Trousers"],
datasets: [{
    label: 'Sales',
    data: [10, 8],
    backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
     ],
    borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
    ],
    borderWidth: 1
}]
},
options: {
scales: {
    yAxes: [{
        ticks: {
            beginAtZero:true
        }
    }]
},
}
});

Here is the JSFiddle (https://jsfiddle.net/kingBethal/L8x790fn/15/).

No, did not find a way or any documentation to get values from another `chartJS` chart (not from DB). — theKing, Sep 03 '18 at 15:45
Suggest why this question was downvoted. As my open statement, I am asking this question, if this is possible or not. Have not seen related or relevant questions in here as well. — theKing, Sep 03 '18 at 15:46
I'm not the downvoter, but I think it was downvoted because in the end answer to "is the possible?" is "yes" or "no", and these types of questions are off-topic for SO. Of course, just about anything "is possible", but you need to show what you've tried so far, and at a minimum the code for Chart 1 and Chart 2. — Carol Skelly, Sep 04 '18 at 11:38

score 0 · Answer 1 · answered Sep 04 '18 at 18:43

I found this thread describing getting data from click events: Click events on Pie Charts in Chart.js

I made also made a new fiddle here where it logs a chart object containing the chart data on chart click: https://jsfiddle.net/btnL9d2a/16/

 myChart1Canvas.onclick = function(evt) {
   var activePoints = myChart.getElementsAtEvent(evt);
   if (activePoints[0]) {
   var chartData = activePoints[0]['_chart'].config.data;
   // `chartData` will be an object in the format {'Labels' : Array, 'datasets' : Array}.
   console.log(chartData);
 }
};

chartData.datasets[0].data is an array of the clicked-on chart's data.

ChartJS: Get value from another another Chart

1 Answers1