lightweight-charts
lightweight-charts copied to clipboard
Option to specify zIndex of the series
i would like to control the layers of the chart elements via z-index.. is there already something for this? i may randomly add a line and i would like to group them somehow
i believe something like
z-indes:0 is the middle layer -1 is behind layer, 1 is infront layer
higher the number, closer to the eye
We don't have a plan to implement this is near future, but I've marked this issue as enhancement.
There might be several solutions:
- Providing
zIndex
property in series' options. It's easy to write it, but really hard to maintain (what order is right now? what to do if the same zIndex of several series?). - Adding new method like
seriesZOrder
/setSeriesZOrder
(or something). It's a bit harder to write how series should be sorted (it might be either a function to compare series or even array of all series), but it's more predictable and maintainable (for me). -
(similar to 1) Providing methods in series api like
sendToBack
/sendToFront
/setZIndex
/etc. We have something like this in big charting library and I don't think that it's good solution.
My favorite is 2, but I'm not sure.
@kirchet @eugene-korobko @ezhukovskiy @bmatusiak @nikitamarcius Any thoughts?
@timocov my choice: setSeriesOrder
(Int) simple and clear. Without associations with zIndex (css like)
@nikitamarcius what's about questions
what order is right now? what to do if the same zIndex of several series?
@timocov
what to do if the same zIndex of several series?
Let them overlap, as if the order was not specified. What is written above in the code, means above on the chart.
what order is right now?
If I understood correctly. Written above in the code, means above on the chart. Ex: I create chart (root) component candlestick, connected a histogram and line chart to it.
- Root chart
setSeriesOrder: 0
- Histogram
setSeriesOrder: 1
- Line chart
setSeriesOrder: 1
- will be under the histogram, because I connected after it.
Histogram setSeriesOrder: 1 Line chart setSeriesOrder: 1
I'm afraid that it could be slightly hard to understand or even maintain. You have 2 series with the same zorder, what order is right now for external user (in this case I mean for developers who integrates the library)? Even if you get all zorders, this doesn't mean actual order, because of some "internal" magic regard order of inserting or something. Also, it would be strange if after setting zorder it'll be changed somehow without notifying.
Any news / workaround for this feature?
In my case I have a candle serie added first with live data + line series added after. Unfortunately the lines are behind the candle.
Any news / workaround for this feature?
In my case I have a candle serie added first with live data + line series added after. Unfortunately the lines are behind the candle.
I don't know if you are still looking for a solution but this might be a potential one. I haven't tested it yet, but candle and lines are both rendered on canvas. so you just have to switch the order of the lineseries and candles being drawn, on new update. Always add the line last even if candle is the only one with the update, and even if there is no new data in the line, update/setData it anyways with the old data.
There might be several solutions:
- Providing
zIndex
property in series' options. It's easy to write it, but really hard to maintain (what order is right now? what to do if the same zIndex of several series?).- Adding new method like
seriesZOrder
/setSeriesZOrder
(or something). It's a bit harder to write how series should be sorted (it might be either a function to compare series or even array of all series), but it's more predictable and maintainable (for me).- (similar to 1) Providing methods in series api like
sendToBack
/sendToFront
/setZIndex
/etc. We have something like this in big charting library and I don't think that it's good solution.My favorite is 2, but I'm not sure.
@kirchet @eugene-korobko @ezhukovskiy @bmatusiak @nikitamarcius Any thoughts?
i think 2 is a good idea too. putting all the series into an array and depending on the z -index set by the user, then function can reorder the array accordingly. then render the series based on the order of the array.