Mixed chart barchart won't show

Question

I have to make mixed chart with chartjs : linechart and barchart.

The chart must contain a linechart, with the mean temperature for the month. and a bar chart, with a consumption for a month

I'm able to display line data, but not the bar chart.

Here you have the chart options

var chartOptions = {
    animation: {
        easing: "easeOutBounce"
    },
    legend: {
        position: 'bottom'
    },
    tooltips: {
        mode: 'nearest',
        intersect: false
    },
    scales: {
        xAxes: [{
            id: 'lineChart',
            type: 'time',
            unit: 'day',
            unitStepSize: 1,
            time: {
                displayFormats: {
                    'millisecond': 'DD/MMMM/YYYY HH:mm',
                    'second': 'mm:ss',
                    'minute': 'HH:mm',
                    'hour': 'DD HH:mm',
                    'day': 'MMM DD',
                    'week': 'MMM DD',
                    'month': 'MMM DD',
                    'quarter': '[Q]Q - YYYY',
                    'year': 'YYYY',
                }
            },
            display: true,
            position: 'bottom',
            ticks: {
                maxTicksLimit: 8
            },
            scaleLabel: {
                display: true,
                labelString: "Heure",
            }
        }],
        yAxes: [{
            id: 'consumption',
            type: 'linear',
            position: 'left',
            ticks: {
                beginAtZero: true
            }
        },
        {
            id: 'temperature',
            type: 'linear',
            position: 'right',
            ticks: {
                beginAtZero: true
            }
        }]
    }
};

When adding a linechart dataset, here is the configuration :

{
    label: "Line",
    type: 'line',
    borderColor: color,
    backgroundColor: color,
    steppedLine: true,
    fill: false,
    xAxisID: "lineChart",
    yAxisID: 'temperature',
    pointRadius: 2,
    lineTension: 0,
    data: [{x : moment("11-2017", "M-YYYY"), y : 20}, {x : moment("12-2017", "M-YYYY"), y : 19}, {x : moment("1-2018", "M-YYYY"), y : 22}, {x : moment("2-2018", "M-YYYY"), y : 16}]
}

For a barchart :

{
        label: "Bar",
        type: 'bar',
        borderColor: color,
        backgroundColor: color,
        xAxisID: "lineChart",
        yAxisID: 'consumption',
        data: [{x : moment("11-2017", "M-YYYY"), y : 20}, {x : moment("12-2017", "M-YYYY"), y : 19}, {x : moment("1-2018", "M-YYYY"), y : 22}, {x : moment("2-2018", "M-YYYY"), y : 16}]
}

So how to have bar chart that contains a full month (for month data as in the example) or a full day, depending on which data the chart take?

Here is a codepen : https://codepen.io/anon/pen/RLEJqV

Lollipop Lollipop · Accepted Answer · 2017-10-18T14:30:32

0

votes

Updating to Chart.js 2.7.0 fix the problem (i used chart.js 2.6.0)

Mixed chart barchart won't show

1 Answers