Line chart is showing under bar in combochart in chartjs

Question

I am using combo chart using chart.js in my website.

The problem I am facing is the line disappears when it meets the bar. I think it is because the line chart is showing below the bar chart.

PFB the code I used.

var PCTCtx = document.getElementById("pctdiv").getContext("2d");

    PCTChart = new Chart(PCTCtx, {
        type: 'bar',
        data: {
            datasets: [{
                label: 'Bar Dataset',
                data: [100, 70, 60, 40],
                backgroundColor: ['red', 'red', 'red', 'red']
            }, {
                label: 'Line Dataset',
                data: [50, 50, 50, 50],
                fill: false,
                backgroundColor: ['#000000', '#000000', '#000000', '#000000'],
                // Changes this dataset to become a line
                type: 'line'
            }],
            labels: ['January', 'February', 'March', 'April']
        },
        options:  {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            },
                            gridLines: {
                                display: false
                            }
                        }],
                        xAxes: [{
                            barThickness: 35,
                            gridLines: {
                                display: false
                            }
                        }]
                    }
                }
    });
    PCTChart.data.datasets[1].borderColor = '#000000';
    PCTChart.update();

I need the line to show on the bar chart.

I have created a jsfiddle for the same here

Any help would be appreciable.

Hello, maybe the problem is in your data, because as you can see here the line is over the bar. I see in the image that in your x-axis you have "time" data slot, so maybe your line starts at the very end of the day and it doesn't go over the bar for this? We need some data to see how the chart is plotted... — Margon
@Margon I have updated the question and added some dummy data, Please check — Shahzad Ahamad
I checked your fiddle, so you can do 2 fix to this behaviour first one: as you can see here, they make the chart with the line dataset as the first one, so it's "above" the bars Second: you can use opacity in your color bars: like "#FF0000CC", so you can see under the bars — Margon

Thirukumaran Thirukumaran · Accepted Answer · 2019-11-07T10:57:22

I was facing the same issue. I found an option "order" in the dataset. https://www.chartjs.org/docs/latest/charts/mixed.html

Line chart is showing under bar in combochart in chartjs

2 Answers