This is a migrated thread and some comments may be shown as answers.

Legend order

4 Answers 153 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
Iron
Iron
Veteran
David asked on 29 Sep 2017, 02:21 PM

Legend order is reversed for some reason (see attached)

Any suggestions

4 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 02 Oct 2017, 11:01 AM
Hi David,

The sereis names shown in the chart's legend are listed in the same order in which they are set in the chart. You can see this behavior demonstrated here here:
http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/stacked-series

If you want to order the items in the legend differently, you will simply need to change their order in the markup.

Regards,
Vessy
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 02 Oct 2017, 12:52 PM

Hi Vessy,

   It seems to me that if item is on top in chart it should be on top in legend.

   Can you elaborate please on "If you want to order the items in the legend differently, you will simply need to change their order in the markup". I set up my items in code behind, not in the markup

Thank you

David

0
Vessy
Telerik team
answered on 02 Oct 2017, 02:37 PM
Hi David,

I am afraid that with the current implementation of the chart, the first series is rendered on the bottom of the column stack (first in stack) and on the top of the legend (firs in legend). Theire is an already logged feature request for adding ability to reverse the legend, so you can vote on its implementation here:
https://feedback.telerik.com/Project/108/Feedback/Details/140318

In the item above you can also see a way to reverse the legend through the Kendo widget of the control, namely:
<script>
function OnLoad(sender, args) {
    var kendoWidget = $find('<%=RadHtmlChart1.ClientID%>').get_kendoWidget();
    kendoWidget.options.legend.reverse = true;
    kendoWidget.redraw();
}
</script>
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
    <ClientEvents OnLoad="OnLoad" />
    ...
</telerik:RadHtmlChart>


Regards,
Vessy
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 02 Oct 2017, 02:48 PM

Understood

Thank you

Tags
Chart (HTML5)
Asked by
David
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Vessy
Telerik team
David
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or