[Chartjs]-Line chart is showing under bar in combochart in chartjs

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

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

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,
  }