CODEWITHSUNDEEP
javascriptchartschart.jsbar-chart
Shahzad Ahamad
Shahzad Ahamad

Reputation: 829

Line chart is showing under bar in combochart in chartjs

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. enter image description here

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.

Upvotes: 5

Views: 5566

Answers (3)

vipin
vipin

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

Upvotes: 0

Thirukumaran
Thirukumaran

Reputation: 61

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

Upvotes: 6

Shahzad Ahamad
Shahzad Ahamad

Reputation: 829

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

Upvotes: 5

Related Questions