Chartjs-How can I have two versions of Chart.js in the same HTML file?

by

0👍

This could happen if you have used the same "id" for both canvases. You could try something like this:

<h1>
Chart 1
</h1>

<div>
  <canvas id="chart1"></canvas>
</div>

<h1>
Chart 2
</h1>

<div>
  <canvas id="chart2"></canvas>
</div>

The code for the charts – note how the first chart uses "chart1" and the second chart uses "chart2". If both charts use "chart1" then the second chart will be drawn on top of the first chart in the same canvas.

new Chart(document.getElementById('chart1'), {
  type: 'line',
  options: {
    responsive: true,
  },
  data: {
    label: [2000, 2001, 2002, 2003, 2004],
    datasets: [{
      label: 'First Dataset1',
      data: [61, 44, 35, 33, 29]
    }]
  }
});
new Chart(document.getElementById('chart2'), {
  type: 'bar',
  options: {
    responsive: true,
  },
  data: {
    labels: [2006, 2007, 2008, 2009, 2010],
    datasets: [{
      label: 'Second Dataset',
      data: [19, 17, 16, 13, 9]
    }]
  }
});

Link to working example: https://jsfiddle.net/hdahle/vtnc49pq/

Leave a comment