score:0

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>


Related Query

More Query from same tag