Mixed charts issue

[ConsoleTVs]

Is there any particular reason why this works:

new Chart(document.getElementById("chartId").getContext("2d"), {
    type: "bar",
    data: {
        labels: ["Undefined", "Undefined", "Undefined", "Undefined"],
        datasets: [{
            "borderWidth": 2,
            "borderColor": "rgba(150, 250, 155, 1)",
            "backgroundColor": "rgba(150, 250, 155, 0.55)",
            "data": [3, 2, 4, 5],
            "label": "Sample",
            "type": "bar"
        }, {
            "borderWidth": 2,
            "borderColor": "rgba(150, 150, 255, 1)",
            "backgroundColor": "rgba(150, 150, 255, 0.55)",
            "data": [5, 4, 2, 3],
            "label": "Sample",
            "type": "line"
        }]
    },
    options: {
        "maintainAspectRatio": false,
        "legend": {
            "display": false
        },
        "title": {
            "display": true,
            "fontFamily": "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
            "fontSize": 14,
            "text": "Blocked threats (%)"
        }
    }
});

and this does not?

new Chart(document.getElementById("chartId").getContext("2d"), {
    type: "line",
    data: {
        labels: ["Undefined", "Undefined", "Undefined", "Undefined"],
        datasets: [{
            "borderWidth": 2,
            "borderColor": "rgba(150, 150, 255, 1)",
            "backgroundColor": "rgba(150, 150, 255, 0.55)",
            "data": [5, 4, 2, 3],
            "label": "Sample",
            "type": "line"
        }, {
            "borderWidth": 2,
            "borderColor": "rgba(150, 250, 155, 1)",
            "backgroundColor": "rgba(150, 250, 155, 0.55)",
            "data": [3, 2, 4, 5],
            "label": "Sample",
            "type": "bar"
        }]
    },
    options: {
        "maintainAspectRatio": false,
        "legend": {
            "display": false
        },
        "title": {
            "display": true,
            "fontFamily": "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
            "fontSize": 14,
            "text": "Blocked threats (%)"
        }
    }
});

The point is; if the type of the chart is bar, bar and line datasets work. If type is line, line datasets work but bar don't.

[StarAzure]

I noticed the same and the problem with setting the initial chart type as BAR is that the points on the Xaxis shift from the grid lines. The x axis points are now in the center between two grid lines.
Looks like for combo charts, you have to set the initial chart type as "BAR" which could have been ok if I could start the chart points at 0 like a line chart

[etimberg]

The issue is that the chart's default options are defined by the overall chart type. The bar defaults bring in some extra settings to configure everything correctly.

Closing as a duplicate of #4587. #5191 and #5134 both contain more details

[StarAzure]

Thanks but none of those issues state which additional options are needed if we take out "bar' type. What extra settings are needed and where do they need to be added? It would have been nice to close it with a resolution. Thanks again

[etimberg]

@StarAzure it's these settings https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.bar.js#L16-L26

The fix is to not require the bar type to be the core type.