Chart.js: Provide a way to lookup chart instance given canvas element

[Markshall]

Feature Proposal

Upon instantiation of the Chart, it would be great if a reference to the Chart instance could be tagged to the HTMLCanvasElement for later usage, rather than having to use hacky ways to access them.

Feature Use Case

I'm looking for a way to reference the instance of one of my charts which is defined in a different JS module to the one I want to reference it in. Exporting the instance doesn't seem to work, and I took a look at @vijayj's implementation, and it would've worked fine, but I push the Chart instances to the window.charts AFTER importing my other JS module, so when I came to access window.charts, it's empty until my other JS module is loaded and executed.

ChartJS already adds a $chartjs property onto the HTMLCanvasElement once instantiated, so it would make sense to add the instance to that property.

Possible Implementation

index.html

<canvas id="chart" width="400" height="200"></canvas>

module1.js

const chartEl = document.querySelector('#chart');
new Chart(chartEl, {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      data: [15, 1, 1, 1, 45, 1],
      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
    }]
  }
});

module2.js

const chartInstance = document.querySelector('#chart').$chartjs.instance;
chartInstance.getDatasetMeta(0).hidden = true;
chartInstance.update();

[benmccann]

A better way to do this might be if we stored a map from canvas ID to chart instance internally.

I do see that $chartjs is added to the canvas in platform.dom.js. However, I don't think this is good practice and feel like we probably shouldn't be doing this.

[Markshall]

A better way to do this might be if we stored a map from canvas ID to chart instance internally.

I do see that $chartjs is added to the canvas in platform.dom.js. However, I don't think this is good practice and feel like we probably shouldn't be doing this.

Can you give an example of how this would work please?

[benmccann]

We'd provide some API like Chart.getInstance('chart') which would return the chart instance ('chart' in this case is the DOM ID on your element)

[Markshall]

We'd provide some API like Chart.getInstance('chart') which would return the chart instance ('chart' in this case is the DOM ID on your element)

Sounds great, would love to see that implemented. Would help my current predicament massively

[kurkle]

Object.values(Chart.instances).filter((c) => c.canvas.id == 'chart').pop()

[Markshall]

Object.values(Chart.instances).filter((c) => c.canvas.id == 'chart').pop()

This works well enough, but would be nice if there was a more intuitive method

[sdetweil]

i just named my canvas myself, and I know how to find it...easy chartjs doesn't know I named it