Stacked Floating Horizontal Bar Using Chartjs

I am trying to implement Stacked Horizontal Floating Bars using ChartJS but there is an unusual behaviour that I am facing. Can someone please help why is this happening. The code

Solution 1:

The reason is that you're stacking the values on the xAxis.

Simply define xAxis as follows and you get the result you're expecting.

xAxes: [{
  stacked:false,
}]

window.myBar = newChart(document.getElementById('canvas'), {
  type: 'horizontalBar',
  data: {
    labels: [1],
    datasets: [{
        label: 'data 1',
        data: [[-3, 5], [6, 8], [10, 11]],
        backgroundColor: 'lightblue'
      },
      {
        label: 'data 2',
        data: [[6, 8]],
        backgroundColor: 'lightblue'
      },
      {
        label: 'data 3',
        data: [[10, 11]],
        backgroundColor: 'lightblue'
      }
    ]
  },
  options: {
    responsive: true,
    scales: {
      xAxes: [{
        stacked: false,
      }],
      yAxes: [{
        stacked: true,
      }]
    },
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Horizontal Floating Bars'
    }
  }
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script><canvasid="canvas"height="80"></canvas>