[Chartjs]-How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?

by

2👍

You can match it to a second x Axis that you hide:

V3 example:

var ctx = document.getElementById("canvas");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat', 'Sun'],
    datasets: [{
      type: 'line',
      label: 'A',
      data: [60, 80, 90, 80, 80, 60, 50],
      backgroundColor: 'rgba(255, 0, 0, 1)',
      borderColor: 'rgba(255, 0, 0, 1)',
      radius: 0,
      xAxisID: 'secondX'
    }, {
      type: 'bar',
      label: 'B',
      yAxisID: 'yB',
      data: [5, 2, 1, 3, 4, 5, 6],
      backgroundColor: [
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)'
      ]
    }]
  },
  options: {
    scales: {
      x: {},
      secondX: {
        axis: 'x',
        offset: false,
        display: false
      },
      y: {
        type: 'linear',
        position: 'left',
        ticks: {
          max: 100,
          min: 0
        }
      },
      yB: {
        position: 'right',
        ticks: {
          max: 10,
          min: 0
        }
      }
    }
  }
});
<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>

V2 Example:

var ctx = document.getElementById("canvas");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat', 'Sun'],
    datasets: [{
      type: 'line',
      label: 'A',
      yAxisID: 'A',
      fill: false,
      data: [60, 80, 90, 80, 80, 60, 50],
      backgroundColor: 'rgba(255, 0, 0, 1)',
      borderColor: 'rgba(255, 0, 0, 1)',
      radius: 0,
      xAxisID: 'second'
    }, {
      type: 'bar',
      label: 'B',
      yAxisID: 'B',
      data: [5, 2, 1, 3, 4, 5, 6],
      backgroundColor: [
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)',
        'rgba(0, 0, 255, 0.5)'
      ]
    }]
  },
  options: {
    scales: {
      xAxes: [{}, {
        id: 'second',
        display: false
      }],
      yAxes: [{
        id: 'A',
        type: 'linear',
        position: 'left',
        ticks: {
          max: 100,
          min: 0
        }
      }, {
        id: 'B',
        position: 'right',
        ticks: {
          max: 10,
          min: 0
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
<canvas id="canvas"></canvas>

Leave a comment