[Chartjs]-How do I hide line outside the min/max (scale area) in chartjs 2.0?

4๐Ÿ‘

โœ…

A quick fix to your issue is to remove everything drawn outside of the chart surface.

The following plugin can help you doing it :

Chart.plugins.register({
    beforeDatasetsDraw: function(chartInstance) {
        var ctx = chartInstance.chart.ctx;
        var chartArea = chartInstance.chartArea;
        ctx.save();
        ctx.beginPath();

        ctx.rect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
        ctx.clip();
    },
    afterDatasetsDraw: function(chartInstance) {
        chartInstance.chart.ctx.restore();
    },
});

Check your updated fiddle here and its result :

enter image description here

Leave a comment