Chartjs-Chart.js More than 1 charts on same web page

by

2👍

HTML

<canvas id="chartOneContainer" width="600" height="400"></canvas>
<br />
<canvas id="chartTwoContainer" width="600" height="400"></canvas>

.

JAVASCRIPT

var optionsOne = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [ 
            {
                label: 'Colors One',
                data: [7, 11, 5],
                borderWidth: 1
            }
        ]
  },
  options: {
    scales: {
        xAxes: [{
        ticks: {
                    display: true
        }
      }]
    }
  }
}

var optionsTwo = {
  type: 'line',
  data: {
    labels: ["Green", "Purple", "Orange"],
    datasets: [ 
            {
                label: 'Colors Two',
                data: [8, 3, 7],
                borderWidth: 1
            }
        ]
  },
  options: {
    scales: {
        xAxes: [{
        ticks: {
                    display: true
        }
      }]
    }
  }
}

var ctxOne = document.getElementById('chartOneContainer').getContext('2d');
new Chart(ctxOne, optionsOne);

var ctxTwo = document.getElementById('chartTwoContainer').getContext('2d');
new Chart(ctxTwo, optionsTwo);

.

Example on JSFiddle

https://jsfiddle.net/u4gs1ttm/

Leave a comment