3

I can't seem to get this mixed chart to display correctly? I have three datasets for a stacked line graph, and another line graph that is not stacked. Here is my dataset code (the data is filled in with code).

var barChartData = {
    labels:[],
    datasets: [
    {
        label: 'A',
        backgroundColor: '#6F7EB3',
        fill: true,
        data: [],
        yAxisID: 'count-y-axis',
        xAxisID: 'count-x-axis'
    },
    {
        label: 'B',
        backgroundColor: '#D05B5B',
        fill: true,
        data: [],
        yAxisID: 'count-y-axis',
        xAxisID: 'count-x-axis'
    },
    {
        label: 'C',
        backgroundColor: '#66A5A0',
        fill: true,
        data: [],
        yAxisID: 'count-y-axis',
        xAxisID: 'count-x-axis'
    },
    {
        label: 'Percent',
        borderColor: '#EFE4B0',
        fill: false,
        data: [],
        yAxisID: 'efficiency-y-axis',
        xAxisID: 'efficiency-x-axis'
    }
]};

And the chart options are:

window.myBar = new Chart(ctx, {
    type: 'line',
    data: barChartData,
    options: {
        title: {
            display: true,
            text: "Mixed Lines"
        },
        tooltips: {
            mode: 'label'
        },
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
                display: true,
                id: "count-x-axis"
            }, {
                stacked: false,
                display: false,
                id: "efficiency-x-axis"
            }],
            yAxes: [{
                type: "linear",
                display: true,
                stacked: true,
                position: "left",
                id: "count-y-axis"
            }, {
                type: "linear",
                display: true,
                stacked: false,
                ticks: {
                    min: 0,
                    max: 100
                },
                position: "right",
                id: "efficiency-y-axis"
            }]
        }
    }
});

When the 'Percent' data set is last in the array of datasets it looks like it is rendered 'behind' the other three datasets. When the 'Percent' dataset is first the other datasets stack (although the 'Percent' dataset is drawn correctly.

Brian Heilig
  • 592
  • 4
  • 16
  • I didn't understand your question. I just ran into same issue with you, have to put 'percent' dataset in the first position of datasets array. You already answered your question anyway – fifth May 03 '17 at 03:36

0 Answers0