Data Series Order (stacking) and Legend Order

[DXC13Participant]

Is there a way to either have a custom order for the legend or set the z-index of each data series display?

I have a chart with 3 data series (splinearea, column, and spline) … splinearea needs to be in the background behind the other lines and bars but appear last in the legend.
From back to front: splinearea (A), column (B), spline (C)
Legend order: B,C,A

To put the splinearea in the background I assign that series first to the group but that also puts it first in the legend. So I can either add the data in display order and change the legend or in legend order and change the display but I haven’t found a way to either change legend order or display order without changing the order in which I add the series.

Any help would be appreciated … Thanks!

[HristoParticipant]

Hello DXC13,

The series are displayed in order that they are in the “seriesGroups” property.
Unfortunately, there is no suitable option to change the order.
Could you clarify it if I do not understand you?
Also, could you provide your example where the order of the series does not have a matter on the display.
I tested this example and it seems to work fine:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_axis_position.htm?arctic

As an alternative I would like to suggest you create a custom legend and show/hide series via methods.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[DXC13Participant]

Here is an example

https://jsfiddle.net/gkqL29m0/

I need SeriesD to be in the background of the chart (as in the example) but I also need it to be listed last in the legend.

The way I see it there are 2 options. Reorder the legend … which sounds like that is not possible at this time. Or be able to push the SeriesD graphic to the background (sort of assigning a z-index or render order)

I may have to see if I can manipulate the DOM on refresh.

[DXC13Participant]

Manipulating the DOM does seem to work

https://jsfiddle.net/2tu83dnf/

Apply the series in Legend order then move the DOM section to the top of the parent.

var target = $(“path[stroke=’#229954′]”);
var container = $(“path[stroke=’#229954′]”).parent();
$(container).prepend(target);

The only requirement is being able to select the correct <path> but in this case since all the colors are known I could select it by the stroke color.
Works with animation also.

[Author]

Posts