jQuery UI Widgets Forums Chart Data Series Order (stacking) and Legend Order

This topic contains 3 replies, has 2 voices, and was last updated by  DXC13 9 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • DXC13

    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!


    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:

    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


    Here is an example


    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.


    Manipulating the DOM does seem to work


    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();

    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.

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

You must be logged in to reply to this topic.