[Chartjs]-Draw borders on line chartjs

0๐Ÿ‘

โœ…

Iโ€™ve found a solution to my problem. The issue was that I was trying to create some space between my datasets and my datas attribute Y doesnt start and end at 0. Therefor I added two extra datapoints in each dataset with a borderWidth of 3 and borderColor that matches the backgroundColor of the chart. Each extra added datapoint will have a Y with the value of 0. An example of adding a dataset to my chart is below.

chart.data.datasets.push({
            fill: true,
            backgroundColor: gradient,
            borderWidth: 3,
            borderColor: '#333',
            data: [
            {
                x: startXvalue,
                y: 0
            },
            {
                x: startXvalue,
                y: startY,
                .. Other attributes
            },
            {
                x: newEntryXend,
                y: endY,
                .. Other attributes
            },
            {
                x: newEntryXend,
                y : 0
            }]
        });

0๐Ÿ‘

Any reason why you can wanted to keep the same background colors for ,

Why cant you try as below

Demo

fill: true,
backgroundColor: 'red',

Leave a comment