Draw borders on line chartjs

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/

score 0 · Answer 1 · answered Oct 07 '17 at 04:23

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',

answered Oct 07 '17 at 04:23

Mahesh G

1,226
4
30
57

Thank you for your answer. The color has value and therefor it is not possible to use a new color for each element. – Bombebak Oct 07 '17 at 09:24

Bombebak · Accepted Answer · 2018-01-26T11:03:16.347

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

Draw borders on line chartjs

2 Answers2