Draw borders on line chartjs - chart.js

Question

I'm using ChartJS to create a line chart with elements. I'm wondering if it possible to set borders on left and right of a element? This is my chart and it gets confusing if you have two elements next to each other and they have the same color.
I've found nothing in the docs that supports it, so I figure that I have to draw it myself using js but I was hoping someone had an solution first :)
In case I have to draw it myself I would run into a problem since every element can have different widths due to the time axis (X). What would be your idea to solve that?
Update
Every element in the chart is a new dataset and gets a gradient object as backgroundColor and fill sets as true. Here is an example of me pushing a new dataset into the chart
chart.data.datasets.push({
fill: true,
backgroundColor: gradient,
data: [
{
x: aIstartX,
y: yAxis_value,
.. Other attributes
},
{
x: newEntryXend,
y: yAxis_value,
..Other attributes
}]
});
xAxes: [
{
stacked: false,
type: 'time',
unit: 'minute',
position: 'bottom',
scaleLabel: {
display: true
},
time: {
displayFormats: {
'minute': 'mm:ss'
}
},
ticks: {
autoSkip: true,
beginAtZero: true,
stepSize: 2,
autoSkipPadding: 5,
padding: 10,
labelOffset: 5,
},
gridLines: {
display: false,
tickMarkLength: 20
},
}
]
Here is a fiddle of my issue
https://jsfiddle.net/fa8hvhtv/1/

Answer 1

Any reason why you can wanted to keep the same background colors for ,
Why cant you try as below
Demo
fill: true,
backgroundColor: 'red',

Answer 2

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
}]
});