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

Change categoryAxis labels of a given list

5 Answers 172 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Markus
Top achievements
Rank 1
Markus asked on 16 Aug 2017, 07:56 AM

Hi,

I am working on an elevation profile chart.

I have a list of 200 distance-points given.: "distancePoints" : [0,222.22,433.3,620.44,822.24,1001.55 ... 5022.56

There a many unlovely values as labels on the categoryAxis like 5022.56, 10022.2 and so on... (see screenshot1).

Is there a possibilty to change the labels on the categroryAxis like 5000, 10000 and so on... (see screenshot2) without changing the list of distancePoints?

Thanks for helping.

 

5 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 17 Aug 2017, 12:52 PM
Hello,

You could use template to round the displayed values without modifying the data - example.

Regards,
Daniel
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
Markus
Top achievements
Rank 1
answered on 18 Aug 2017, 06:41 AM

Hi,

Thanks for the answer, but I still have a problem. I need distance ticks all 100 or 200 or 1000 meters. The Points are given "distancePoints" : [0,222.22,433.3,620.44,822.24,1001.55 ... 5022.56]. How can I add a meaningful category axis, with rounded values, like 200, 400, ....2000 I tried to add a second category axis, but the it isn't precise enough. The second axis values are always behind the correct points.(see screenshot 4). The second category axis values are never correct. Is there maybe a function for that?

0
Markus
Top achievements
Rank 1
answered on 18 Aug 2017, 07:08 AM

In better words in need the categories values here (See screenshot 5)

And I perhaps don't need a scond axis? (See screenshot 6)

0
Accepted
Daniel
Telerik team
answered on 21 Aug 2017, 12:49 PM
Hello again,

I am not sure if I understand the requirement but if you need to show only the labels from the second image and they are equally spaced then you could round the values and set step for the labels - example.

Generally, the category axis does not support placing the categories based on their numeric value. You might consider using scatterLine chart instead which has numeric x axis if this is the requirement.


Regards,
Daniel
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
Markus
Top achievements
Rank 1
answered on 22 Aug 2017, 02:19 PM

Thank you very much Daniel.

I think scatterLine is the solution. Thanks for that hint

 

Regards

Markus

Tags
Charts
Asked by
Markus
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Markus
Top achievements
Rank 1
Share this question
or