Get Chart js object in another function

Question

After creating a chart like this (with Chart.js, latest version):

var ctx = $('#graph');
var graph = new Chart(ctx, {
  type: 'line',
  data: someData, 
});

I would like to retrieve the Chart object in another function in order to add some data point to it:

var graph = ???
graph.data.labels.push(1)
graph.data.datasets[0].data.push(10);

How do I get the Chart object?

Thank you in advance!

Bryn Lewis · Accepted Answer · 2021-09-03 01:23:39Z

11

You can just do this:

var graph = Chart.getChart('graph')

Works in v3 - not sure when it was introduced.

answered Sep 3, 2021 at 1:23

Bryn Lewis

5981 gold badge5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bryn Lewis · Accepted Answer · 2021-08-27 11:20:08Z

10

Perhaps:

 var ctx = $('#graph');
 var graph = new Chart(ctx, {
     type: 'line',
     data: someData, 
 });
 ctx.data('graph', graph);

and later:

 var graph = $('#graph').data('graph');
 graph.data.labels.push(1)
 graph.data.datasets[0].data.push(10);
 graph.update();

// //

edited Aug 27, 2021 at 11:20

Bryn Lewis

5981 gold badge5 silver badges14 bronze badges

answered Aug 4, 2018 at 13:45

Mario Orlandi

5,84930 silver badges33 bronze badges

8 Comments

enigment Over a year ago

I like this idea, but far as I can see, modifying that data object has no effect on the rendered chart. For instance, I can read .config.type form it, but changing it does nothing. I wish chart.js would provide some supported way to access the chart object from its DOM element. Seems basic.

Mario Orlandi Over a year ago

"modifying that data object has no effect on the rendered chart" .. I do believe it does ! you might need to update the chart after modifications

Mario Orlandi Over a year ago

"I wish chart.js would provide some supported way to access the chart object from its DOM element" ... true ! but this is exactly what I was doing in the above snippet: attaching the chart object as a property to the DOM element, for retrieving it later to work with it

enigment Over a year ago

Doh! You're right, works fine with update(), thanks.

Mario Orlandi Over a year ago

Did you forget <canvas id="graph"></canvas> in your template ?

|

ɢʀᴜɴᴛ · Accepted Answer · 2017-05-16 21:01:14Z

3

You could directly use the graph object without assigning it to another variable ( considering graph is a global variable ) to add any sort of data from another function.

Here is a quick example of that ...

var ctx = $('#graph');
var graph = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May"],
        datasets: [{
            label: "Sales",
            data: [1, 2, 3, 4, 5],
            fill: false,
            borderColor: '#07C',
        }]
    }
});

function addData() {
    graph.data.labels.push('June')
    graph.data.datasets[0].data.push(6);
    graph.update();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<button onclick="addData()">Add Data</button>
<canvas id="graph"></canvas>

in case: the graph variable is inside a function then, you'd have to make the variable global to use it from another function

answered May 16, 2017 at 21:01

ɢʀᴜɴᴛ

33k15 gold badges123 silver badges115 bronze badges

2 Comments

JIN Over a year ago

The code where I create the graph is in a document.ready function, so it is not global. I thought it was bad practice to define a variable in global scope, but I was able to solve it this way. Thank you!

Rahul Hindocha Over a year ago

How can we access the chart object if in case we don't save it in a variable or we don't have access to that variable as it might be overridden by some other chart object.

Maayan Hope · Accepted Answer · 2019-05-14 14:43:10Z

2

//get object
const chartJS: Chart = $("#myChart").data('chart');

//change something
chartJS.config.options.scales.yAxes[0].ticks.min = minVal <= 0 ? minVal : minVal - 

//update
chartJS.update();

answered May 14, 2019 at 14:43

Maayan Hope

1,6211 gold badge19 silver badges37 bronze badges

1 Comment

Alexandre Huat Over a year ago

For me, $(<appropriateQuerySelector>).data('chart') returns undefined.

Collectives™ on Stack Overflow

Get Chart js object in another function

4 Answers 4

Comments

8 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

8 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related