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.

Answer 1

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

Answer 2

I found the solution my self.

Actually, we need to put the line data above the bar data in the dataset. the chart.js creates the chart from top to bottom in the order it finds the chartdata in the dataset.

So I changed the code to to below

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

    PCTChart = new Chart(PCTCtx, {
        type: 'bar',
        data: {
            datasets: [{
                label: 'Line Dataset',
                data: [50, 50, 50, 50],
                fill: false,
                backgroundColor: ['#000000', '#000000', '#000000', '#000000'],
                // Changes this dataset to become a line
                type: 'line'
            },{
                label: 'Bar Dataset',
                data: [100, 70, 60, 40],
                backgroundColor: ['red', 'red', 'red', 'red']
            }],
            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';

and it worked for me thankyou

Answer 3

we can use order to overcome this problem ex.

    label: 'Schedule',
    data: [...lineData],
    borderColor: '#9630D6',
    backgroundColor: '#fff',
    type: 'line',
    order: 0,
  },
  {
    label: 'bar 1st',
    data: [...barData1],
    backgroundColor: '#97CEA5',
    barThickness: 40,
    order: 1,
  },
  {
    label: 'bar 2nd',
    data: [...barData2],
    backgroundColor: '#E2BB72',
    barThickness: 40,
    order: 2,
  },

  {
    label: 'bar 3rd',
    data: [...barData3],
    backgroundColor: '#E2E28F',
    barThickness: 40,
    order: 3,
  }