Chartjs-Grouped bar charts with intersecting ticks

0πŸ‘

βœ…

It was recommended to use float bars, which seems to have solved my problem.

var chart = new Chart(ctx, {
    type: "bar",
    data: {
        labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        datasets: [
        {
            backgroundColor: "rgb(255, 99, 132, 0.5)",
            borderColor: "rgb(255, 99, 132)",
            data: [10, 7, 9, 5, 8, 3, 4, 2, 1, 1],
            stack: '1'
        },
        {
           backgroundColor: "rgb(75, 192, 192, 0.5)",
           borderColor: "rgb(75, 192, 192)",
           data: [11, 10, 9, 8, 7, 6, 5, 4, 3, 2],
           stack: '2'
        },
        {
           backgroundColor: 'black',
           data: [[11,11.1], [6,6.1]],
           stack: '1'
        },
        {
           backgroundColor: 'brown',
           data: [[9,9.1], [5,5.1]],
           stack: '2'
        }
        ]
   },
   options: {
       scales: {
           y: {
                stacked: false
           }
       }
   }
});

https://codepen.io/kurkle/pen/BaoQdLN?editors=1010

Leave a comment