score:0

Accepted answer

actually there's no way to create such a chart with chartjs framework. so i had to manipulate the chart data (and colors) with js to get the results. if someone is interested in more details i'm available.

score:0

drawing bars with different orientation can be done with floating bars. individual bars are specified with the syntax [min, max]. this feature was introduced with chart.js v2.9.0.

new chart(document.getelementbyid('canvas'), {
  type: 'horizontalbar',
  data: {
    labels: [1, 2, 3, 4],
    datasets: [{
      label: 'data',
      data: [[-3, 0], [0, 6], [-4, 0], [0, 5]],
      backgroundcolor: ['red', 'blue', 'green', 'orange']
    }]
  },
  options: {
    responsive: true,
    legend: {
      display: false
    },
    title: {
      display: false
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="canvas" height="90"></canvas>


Related Query

More Query from same tag