valueAxis chart formatting

2 posts, 1 answers
  1. Robbert
    Robbert avatar
    1 posts
    Member since:
    Sep 2014

    Posted 25 Feb 2015 Link to this post

    We're trying to change the styling of the valueAxis to:

    1. Show the scale on the amount of the value axis next to the largest amount.

    It might be possible to implement this by using a valueAxis.title for the scale and (negative) margins on the plotArea, valueAxis and valueAxis.title. This however feels fragile (for example it depends on the width of the title text). Is there a another, better way to implement this that is more robust?

    2. We want the grid lines to extend to the left and have the amounts shown on top of them instead of next to them.

    We couldn't find a way to extend the grid lines to the left. Is this possible in any way?

    See http://dojo.telerik.com/@ckuijjer/aZipA for a code example of our implementation
  2.
  3. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 27 Feb 2015 Link to this post

    Hello,

    The best I could do out of the box was to flip the axis labels and adjust their margin and plotArea padding.
    valueAxis: {
      labels: {
        margin: {
          bottom: 14,
          left: -10
        },
        mirror: true
      }
    },
    plotArea: {
      margin: {
        left: 5,
        right: 5
      }
    }
     
    See the updated snippet. What I couldn't do is to add spacing between the axis labels and the series.
    One thing that could work is to add null data point at the start, but that doesn't feel great.

    I hope this helps.

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