Same bar different color / One bar with many colors

by

1đź‘Ť

âś…

This answers the question from your title: “Same bar different color / One bar with many colors”.

This can be done using stacked bar chart.

new Chart(document.getElementById('canvas'), {
  type: 'horizontalBar',
  data: {
    labels: ['CURRENT MO.', 'NEXT MO.', 'FOLLOWING MO.'],
    datasets: [{
        label: '',
        data: [1.6, 1.15, 1],
        backgroundColor: 'rgb(255, 255, 255)',
        hoverBackgroundColor: 'rgb(255, 255, 255)'
      },
      {
        label: 'CERTAIN',
        data: [0.15, 0.3, 0.45],
        backgroundColor: 'rgb(119, 185, 229)'
      },
      {
        label: 'EXPECTED',
        data: [0.45, 0.7, 0.6],
        backgroundColor: 'rgb(231,200,28)'
      },
      {
        label: 'UNLIKELY',
        data: [0.25, 0.35, 0.45],
        backgroundColor: 'rgb(238, 63, 55)'
      },
    ]
  },
  options: {
    responsive: true,
    tooltips: {
      display: false
    },
    scales: {
      xAxes: [{
        stacked: true,
        ticks: {
          min: 0.5,
          max: 3
        }
      }],
      yAxes: [{
        stacked: true,
        gridlines: {
          display: false
        }
      }]
    },
    legend: {
      display: [false, true, true, true]
    },
    title: {
      display: true,
      text: 'Where Are We Going to Land?'
    }
  }
});
canvas {
  max-width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="140"></canvas>

Leave a comment