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 :
Source:stackexchange.com