Change categoryAxis labels of a given list

6 posts, 1 answers
  1. Markus
    Markus avatar
    4 posts
    Member since:
    Mar 2017

    Posted 16 Aug Link to this post

    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.

     

  2. Daniel
    Admin
    Daniel avatar
    2173 posts

    Posted 17 Aug Link to this post

    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.
  3. Markus
    Markus avatar
    4 posts
    Member since:
    Mar 2017

    Posted 18 Aug Link to this post

    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?

  4. Markus
    Markus avatar
    4 posts
    Member since:
    Mar 2017

    Posted 18 Aug Link to this post

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

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

  5. Answer
    Daniel
    Admin
    Daniel avatar
    2173 posts

    Posted 21 Aug Link to this post

    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.
  6. Markus
    Markus avatar
    4 posts
    Member since:
    Mar 2017

    Posted 22 Aug Link to this post

    Thank you very much Daniel.

    I think scatterLine is the solution. Thanks for that hint

     

    Regards

    Markus

Back to Top