Chartjs-Chart.js : straight lines and curves lines in the same graph

by

0👍

bezierCurve is a chart level (not a dataset level) option. So you need to override the chart to do this. The easiest way would be to plug in to the hasValue function (it gets called right before the dataset line is drawn)

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function (data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);

        var options = this.options;
        this.datasets.forEach(function (dataset, index) {
            var originalHasValue = dataset.points[0].hasValue;
            dataset.points[0].hasValue = function () {
                // change option by dataset index here
                options.bezierCurve = (index === 0) ? true : false;
                return originalHasValue.apply(this, arguments)
            }
        })
    }
});

and then

...
var myLineChart = new Chart(ctx).LineAlt(data);

Leave a comment