leeoniya / uPlot

📈 A small, fast chart for time series, lines, areas, ohlc & bars
MIT License
8.48k stars 370 forks source link

Can I hide an axis but not the ortho lines? #939

Closed NinjaInShade closed 1 month ago

NinjaInShade commented 1 month ago

image

I have something like this, where I have multiple charts stacked on top of each other to display analogue/digital data. My goal here is to visually show all of these as "one" chart even though underneath it's multiple uPlot instances.

As you can see in the screenshot, the X axis shows for all charts. I can hide it with { show: false }, but then the ortho lines also go away. Few questions:

1) can I show the ortho lines even if the axis is { show: false } 1a) can I make it so the ortho lines don't overflow the chart container so to speak, as they overflow a little bit (which is fine if you actually have a defined, shown, axis, but I don't in this case)? 2) so I know padding is added so that the axis labels aren't cut off, but can I have 0 padding on the chart but let the axis labels overflow? This is because the charts should be seamless between each other but the axis should be able to overflow. I guess what I may be looking for is way to add padding "inside" the canvas as opposed to around it

In other words, I'm making something similar to https://leeoniya.github.io/uPlot/demos/y-shifted-series.html but with series not having the same ranges/data so it is dynamic. I have started to make it with multiple chart instances but there a few issues (the main above) that prevent me from making the charts look seamless like your demo.

NinjaInShade commented 1 month ago

image

Here's a screenshot of when I hide the axes. Here you can notice the X-axis ortho lines only show on the last chart because all the others have the X-axis hidden.

Also in this screenshot, you can see the right-axis text being cut off due to no padding in between charts. This padding problem I have also extends to where the charts meet - I'd like to have some spacing in-between the series but "inside" the canvas, not outside the charts. This all refers to my 2nd point in my first comment.

leeoniya commented 1 month ago

there's no way to hide the axis but show the lines.

i think a better solution here would be to use a single plot for this. it will take a bit of data poking, but should be pretty straightforward.

if you attach your data here i can probably put together a demo of this. it's not clear what you're putting on the right y axis in the main plot, though :thinking:

leeoniya commented 1 month ago

actually, maybe 2 plots here would work well.

the bottom one would hold all the discrete series and do the same logic as https://leeoniya.github.io/uPlot/demos/y-shifted-series.html. the range there seems to be just 0/1 for each series, so shifting should be easy.

then you can simply set the x axis size: 0 and disable label and tick rendering.

the shifting logic in the bottom one can just insert a "fake" 1 padding between each series so that the 0 of one does not overlap with 1 of the one below it. so if you have 3x discrete series, you would have:

0-1 - series 1 2-3 - seriss 2 4-5 - series 3

with the full y axis range of 0-5, or -1-6 if you want a bit of padding at the extremes.

leeoniya commented 1 month ago

this should get you close enough: https://leeoniya.github.io/uPlot/demos/timeseries-discrete.html

image
SystemParadox commented 2 weeks ago

This is very helpful thank you!