Chartjs-Secondary bar with chart.js

by

0👍

✅

You can achieve a similar style by styling the bars and adding a second axis. Refer to the annotations in the below snippet:

var poteData = {
  //myData
  labels: ['a', 'b'],
  datasets: [{
    data: [1, 2],
    backgroundColor: 'red',
    borderColor: 'transparent',
    borderWidth: 15
  }, {
    data: [3, 4],
    backgroundColor: 'blue',
    borderColor: 'transparent',
    borderWidth: 15
  }, {
    data: [10, 11],
    backgroundColor: 'transparent', // style this bar appropriately.
    borderColor: 'black', // style this bar appropriately.
    borderWidth: 5,// style this bar appropriately.
    yAxisID: 'right' // assign this bar to the second y-axis.
  }]
};

var poteOptions = {
  legend: {
    display: false
  },
  responsive: true,
  tooltips: {
    mode: 'index',
    intersect: false
  },
  scales: {
    xAxes: [{
      stacked: true,
      gridLines: {
        display: false
      },
      ticks: {
        beginAtZero: true
      }
    }],
    yAxes: [{
      stacked: true,
      gridLines: {
        display: false
      },
      ticks: {
        beginAtZero: true
      }
    }, {
      id: 'right', // create a second y-axis called 'right'.
      position: 'right', // draw it to the right side of the chart.
      gridLines: {
        display: false
      },
      ticks: {
        beginAtZero: true
      }
    }]
  }
}

//window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
  type: 'bar',
  data: poteData,
  options: poteOptions
});
//};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="canvas"></canvas>

Leave a comment