Home forums Chart Support Multiple Series in one chart: One seems to hide all line series

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #31704

    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

    #31732

    @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

    #31733

    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

    #31749

    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

    #31757

    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

    #31764

    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

    #31766

    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!

    #31765

    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!

    #31779

    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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.