lightweight-charts icon indicating copy to clipboard operation
lightweight-charts copied to clipboard

Option to specify zIndex of the series

Open bmatusiak opened this issue 5 years ago • 9 comments

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

bmatusiak avatar Jul 20 '19 18:07 bmatusiak

We don't have a plan to implement this is near future, but I've marked this issue as enhancement.

timocov avatar Jul 22 '19 14:07 timocov

There might be several solutions:

  1. 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?).
  2. 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).
  3. (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 avatar Nov 25 '19 12:11 timocov

@timocov my choice: setSeriesOrder (Int) simple and clear. Without associations with zIndex (css like)

odlainepre avatar Nov 27 '19 15:11 odlainepre

@nikitamarcius what's about questions

what order is right now? what to do if the same zIndex of several series?

timocov avatar Nov 28 '19 12:11 timocov

@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.

odlainepre avatar Nov 28 '19 20:11 odlainepre

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.

timocov avatar Dec 09 '19 09:12 timocov

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.

bastw055 avatar Oct 30 '20 19:10 bastw055

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.

0x0tyy avatar Feb 01 '23 08:02 0x0tyy

There might be several solutions:

  1. 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?).
  2. 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).
  3. (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.

0x0tyy avatar Feb 01 '23 08:02 0x0tyy