Ordering (zindex) of series/lines in chart

[Jean-François]

Hi, 

Is there a way to control the z-index of series in kendo ui charts? 

In the attached screenshot, the blue line is reference data while the black one is actual data. Is there a way to make the black line go over the blue one? This would (I think) help with the fact that the tooltip is hard to reach. Plus it would make my customer happier.

Thanks

[Iliana Dyankova]

Hi Jean-François,

The series order depends on the series order definition. Hence in order to achieve the expected result you should define the black series after the blue one. For your convenience here is a simple example.

Regards,
Iliana Nikolova
Telerik

 

 

[Jean-François]

Hi, 

Thanks for the example. It's my bad I wasn't specific enough though. We use a remote datasource, and the series are loaded with the group/sort option. 

I later found that I could change the order by changing the value of the group field. If I group on field "abc", then "A" will be rendered before "B". So I named my data "zData" to make sure it was loaded last. 

The issue is that the first drawn series seems to impact the displayed categories (when using a category field, not a static one). So the order is of importance, but I see no way of controlling this other than alphabetically (which is somewhat counter-intuitive really). 

I'll create an example next week if need be, I don't have time right now, sorry.

Thanks again

[Hristo Germanov]

Hi Jean-François,

I think that in this case you need to set dir: "desc" in the dataSource.group. Could you try to examine this example and tell me if it works for you?

Regards,
Hristo Germanov
Telerik

 

 

[Jean-François]

Hi, 

Yes, I know I can change the direction. The issue still remains though, Data is a configurable name so I cannot guarantee the users will name the series properly (and I don't really want to add this constraint). 

So the only solution would be to compute a field that, when grouped on, would be in the proper order?

In other words, I have this : a set of reference data (lines in the background) + real data (dynamic). The name of each one can change, though I guess I could created another computer property to suit my needs. I would like to say "draw the X axis according to the real data series". Currently all I can do is hope that this series is either at the end or the start (alphabetically) and group them accordingly. I'd rather be able to specify which curve needs to be used. Otherwise, if I have real data from 1 to 10, but reference data from 1 to 20 and the reference data is used to draw the X axis, I will get too big a range. In other graphics, I'd want to span the X axis according to the reference data and draw the real data over it. 

Feels kind of like a "hack" to manage all this because the name comes first/last in the alphabet. Maybe I'm not using something properly though.

Thanks.

[Hristo Germanov]

Hi Jean-François,

In this case you can hook up to the chart's dataBound and sort the series by the desired field. I have updated my example with custom sorting by order field.

Live example: http://dojo.telerik.com/iXah

I hope this helps.

Regards,
Hristo Germanov
Telerik