简体   繁体   中英

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

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?

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM