Chartjs annotations-plugin: Can I add multiple vertical lines to identically named x-axis labels?

161 Views Asked by At

I have a chartjs graph with an x-axis consisting of the hours of the past three days. Because it is 3 days, each hour appears in the x-axis 3 times. I want to draw vertical lines at each 12:00am, but I am not sure how to differentiate the first 12:00am with the second and third.

annotation: {                  
      annotations: [{
            type: 'line',
            id: 'vLine',
            mode: 'vertical',
            display: true,
            scaleID: 'x-axis-0',
            value: '12:00am',
            borderWidth: 1,
            borderColor: 'gray',
            label: {
                    enabled: true,
                    position: "center",
                    content: 'day bar'
            }
    }]

}

Here is what the graph currently looks like

Would each time need a unique label, or is it possible to differentiate between the 3 identical x-axis times without changing their x-axis labels?

1

There are 1 best solutions below

0
On

I have found a quick fix, but am still wondering if there is a better solution.

I simply added a space to the 2nd appearance of '12:00am', and then I added 2 spaces to the third appearance. This way they all look the same to the user, but chartjs can differentiate between them.