Chart.js #5804

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [0, 1, 2],
    datasets: [{
      type: 'line',
      fill: false,
      data: [100, 200, 300],
      borderColor: 'red',
      yAxisID: 'y-axis-0'
    },{
      type: 'line',
      fill: false,
      data: [300, 200, 100],
      borderColor: 'blue',
      yAxisID: 'y-axis-0'
    }, {
      data: [1, 2, 3],
      backgroundColor: 'pink',
      yAxisID: 'y-axis-1'
    },{
      data: [3, 2, 1],
      backgroundColor: 'lightblue',
      yAxisID: 'y-axis-1'
    }]
  },
  options: {
    scales: {
      yAxes: [{
        id: 'y-axis-0',
        scaleLabel: {
          display: true,
          labelString: 'Scale for lines'
        },
        ticks: {
          beginAtZero: true
        }
      }, {
        id: 'y-axis-1',
        scaleLabel: {
          display: true,
          labelString: 'Scale for bars'
        },
        ticks: {
          beginAtZero: true
        },
        position: 'right'
      }]
    }
  }
});