How to put labels on axis in line chart

6 posts, 0 answers
  1. Tony
    Tony avatar
    13 posts
    Member since:
    Jul 2013

    Posted 04 Aug 2013 Link to this post

    Hi there,

    I am currently mocking up a demo of a chart. I have attached an image.

    I need to replace the numbers on the right axis with labels.

    For example,
    0 will be Nil
    5 will be Bronze
    10 will be Silver
    15 will be Gold
    20 will be Platinum
    25 will be Diamond

    How can I show labels for that right axis instead of the numbers?

    Regards,
    Tony
  2.
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 06 Aug 2013 Link to this post

    Hello Tony,

    From the provided picture it appears you are using Kendo UI ScatterLine Chart. I am afraid setting text labels instead of numbers on the axes is not supported for XY Charts (such as Scatter, ScatterLine etc.), however you could workaround it using a template for the axes. A possible implementation is demonstrated in this forum thread.  

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Tony
    Tony avatar
    13 posts
    Member since:
    Jul 2013

    Posted 07 Aug 2013 Link to this post

    Hi Illiana,

    I believe this will work. Am I correct in my belief that this cannot be done using the MVC wrappers at this time, and I will have to use javascript directly? 

    Regards,
    Tony
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 07 Aug 2013 Link to this post

    Hi Tony,

    You could use Kendo UI Chart for ASP.NET MVC, however in the labels.template you should execute custom JavaScript logic in order to achieve the expected result.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Tony
    Tony avatar
    13 posts
    Member since:
    Jul 2013

    Posted 07 Aug 2013 Link to this post

    I'm not sure what you mean by executing custom JavaScript logic. Do you have an example?
  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 09 Aug 2013 Link to this post

    Hi Tony,

    As pointed in the documentation, in the labels.template you could call a function. The idea of the suggested workaround is to create a function which sets text instead of numeric values to the axes labels.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top