How to freely segment the timeline in a grouped graph？

[dingjunweibjkanyun]

https://leeoniya.github.io/uPlot/demos/multi-bars.html I want to achieve custom time segmentation points by customizing scales. x.range and axes. x.splits, which has the advantage of achieving consistent segmentation points if the start and end times are the same for different graphs. However, it seems that this approach is not feasible for grouped graph, as the time division lines of grouped graph strictly rely on temporal data and cannot be freely cut. Is there any way to solve this problem?

[leeoniya]

I want to achieve custom time segmentation points

are you asking to place the same x ticks on a grouped bar chart as on another time series line chart?

can you attach your data and draw an example of what you are trying to get?

[dingjunweibjkanyun]

I want to achieve custom time segmentation points

are you asking to place the same x ticks on a grouped bar chart as on another time series line chart?

can you attach your data and draw an example of what you are trying to get?

yes

[leeoniya]

this is tricky. a grouped bar chart can only have x labels at the exact data points, but a time series chart can have x labels in any place. you will have to provide specific example data and what you expect. i cannot give you a generic answer.

[dingjunweibjkanyun]

this is tricky. a grouped bar chart can only have x labels at the exact data points, but a time series chart can have x labels in any place. you will have to provide specific example data and what you expect. i cannot give you a generic answer.

ok

[dingjunweibjkanyun]

I want to achieve a grouped bar chart that can freely segment the x-axis like a time series chart. The purpose is to ensure that the x-axis of both the time series chart and the grouped bar chart appears neat and consistent. I tried to segment it in the same way, but a grouped bar chart will introduce some new issues. issues list：

1. Hooks.setCursor returned incorrect index.
2. The drawn area is always the entire canvas, rather than just the location covered by the data, as in a time series chart.

Is there any way to meet my needs?

this is demo. https://jsfiddle.net/ofdq1cm8/13/

[dingjunweibjkanyun]

Can you give me some help？

[leeoniya]

i have good news and bad news for you.

the bad news is that i cannot help you with synchronizing grouped bar x axis with a linear time axis. it is not something that can be done easily, or even makes sense. if you know of another chart library that is able to do this, please use it instead of uPlot.

the good news is that for the example you are showing with only two bars per point, you can use a real time axis for both plots. you may actually even use a single plot for all your data. to do this you simply create two bar series: one with align: -1 and another with align: 1. after you do this you will have to expand your x time range slightly so that the bar at the left edge and the bar at the right edge do not get cut off.

https://github.com/leeoniya/uPlot/blob/5756e3e9b91270b303157e14bd0174311047d983/demos/line-paths.html#L55-L56

[dingjunweibjkanyun]

Thank you very much

[dingjunweibjkanyun]

Can you give me some suggestions and directions regarding automated testing of charts?

[dingjunweibjkanyun]

When I am using uPlot to render multiple lines on a chart, such as when the number of lines exceeds 100, there is a performance pressure when the mouse moves on the chart. My solution is to take a leaf out of DataDog's book. Disable the built-in highlight function of uplot. The rendering of the highlight layer will be done on another layer so that it's not necessary to frequently update the main layer, but just update the highlighted layer. Is this a good idea?

[leeoniya]

The rendering of the highlight layer will be done on another layer so that it's not necessary to frequently update the main layer, but just update the highlighted layer.

related: https://github.com/leeoniya/uPlot/issues/922

Can you give me some suggestions and directions regarding automated testing of charts?

https://playwright.dev/docs/test-snapshots

[dingjunweibjkanyun]

Thank you very much