Multiple Series in one chart: One seems to hide all line series

[Daniel]

Hello,

in this fiddle (https://jsfiddle.net/joxautfc/) I have a chart that contains multiple series (also of different type).
I thought that the position in the data array defines the layer of the series to be drawn in the chart,
but in this example the “Series 1” seems to hide “Series 12”, “Series 13” and “Series 17” (even though they are of type stepLine).

As soon as I move “Series 1” from index 0 in the data array to index 1, all the other stepLine series also reappear again
(show in this fiddle: https://jsfiddle.net/gbu4o1qv/).

Can you please tell me what I’m doing wrong?

Thank you very much for your help,
Daniel

[Shashi Ranjan]

@djabornig,

You can try using Stacked Charts to achieve your requirement. In case of line / step-line / area chart one series may overlap with another whereas, in stacked area chart, each series is stacked one on top of the other.

—
Shashi Ranjan
Team CanvasJS

[Daniel]

Unfortunately this will not work, because the line series are not stacked and the stacked (area) series must be of type stepLine and, maybe I have overlooked it, but I think there is no stacked are chart of type stepLine.

Is there any rule in which order the series are drawn to the chart, so that I can organize it in the correct order?

Thank you very much!
Daniel

[Shashi Ranjan]

Daniel,

Is there any rule in which order the series are drawn to the chart, so that I can organize it in the correct order?

DataSeries are rendered in the same order in which they are passed to the chart-options.

You can achieve Stacked Step-Area chart using Step-Area Chart as shown in this JSFiddle.

—
Shashi Ranjan
Team CanvasJS

[Daniel]

Thanks for the JSFiddle this helps at least for the stacked part of the chart!

But I still have to combine it with simple stepLine series and I still don’t quite understand if my JSFiddles show a behaviour that is on purpose or a bug.

The series are rendered in the same order they are passed to the chart-options, okay.
But why then a data array of [series1, series2, series3] results in a chart that shows nothing and [series2, series1, series3] shows all three stepLine series?
I understand that they would overlap, but why do they become completeley invisible?

Thanks for your help,
Daniel

[Shashi Ranjan]

Daniel,

You can use fillOpacity property for dataSeries where Step Area Chart are used. This will enable you to show those dataSeries which were getting hidden due to overlapping with other dataSeries.

—
Shashi Ranjan
Team CanvasJS

[Daniel]

Thanks, but I’m talking about the stepLine series in my initial example (https://jsfiddle.net/joxautfc/ and https://jsfiddle.net/gbu4o1qv/) (not the area, stacked ones).
Why does “Series 1” at position 0 make all the other stepLine series disappear and everything is fine if “Series 1” is at position 1?

Thanks for your help!

[Daniel]

Thanks, but I’m talking about the stepLine series in my initial example (https://jsfiddle.net/joxautfc/ and https://jsfiddle.net/gbu4o1qv/). They are “removing” other stepLines (no filling, no background color, no stacked values, etc.).
Why lets the specific position of “Series 1” in chart data array vanish all the other stepLines?
Why is everything ok, if “Series 1” is at position 1 and all the stepLine series vanish if it is at position 0?

Thanks for your help!

[Shashi Ranjan]

Daniel,

In the JSFiddle shared by you, stepArea chart is rendered before stepLine chart. Because of this, stepLine chart gets hidden behind the stepArea chart(in case of area chart entire region gets filled). Positioning dataSeries with area charts before that of stepLine chart should work fine in your case.

—
Shashi Ranjan
Team CanvasJS