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

valueAxis chart formatting

1 Answer 135 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Bla
Top achievements
Rank 1
Bla asked on 25 Feb 2015, 01:12 PM
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

1 Answer, 1 is accepted

Sort by
0
Accepted
T. Tsonev
Telerik team
answered on 27 Feb 2015, 09:52 AM
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!
 
Tags
Charts
Asked by
Bla
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or