Vertical x-Axis labels?

Suite and Optimus Suite 5
#1

Hi,

First off - what an amazing product range you have … I’m only using the chart library but I’m pretty sure it wont be long until I’m using a lot more …

Is it possible to display the X Axis labels vertically ? I’m using AJAX to bring in new values every x seconds and using the X Axis for time - but after a couple of additions the times are unreadable when the labels are displayed horizontally as they are now …

I searched for “vertical” and looked in the API docs and couldn’t see any options …

Thanks
Paul

#2

there is no built in support, but you have two solutions

a) define custom css rules for labels and include in them css transformation rules, which will rotate text ( may be a bit complicated on practice )

b) instead of rotating the text you can show not all labels but only part of them
instead of

template:"#id#",

you can use

template:function(obj, common, data){ if (obj.id%2) return obj.id; return ""; },

logic of above method can be changed in such way, that it will adapt to total count of records ( the more points, the more it skips )

#3

Hi,

Thanks for those suggestions - infact while i was awaiting and answer on this forum I did find a very easy way to rotate text in all browsers … CSS …

However I noticed that the correct CSS class isn’t added to the X Axis labels - here is an example of the chart im using :

[code]

14
19
Bikes on Hire
2010
2010
2010
Time
[/code]

You notice that the Y Axis items have a class of “dhx_axis_item_y” - but the X Axis items have no such class … i think they should have a class of “dhx_axis_item_x” - but it doesnt seem to be working - are you able to assist ?

#4

Hi,

Try using dhtmlxchart.js attached here:

viewtopic.php?f=8&t=16316

it sets class for x-axis labels

#5

That didnt fix my problem - do i also need the css ?

#6

Sorry for the misleading information - that file doesn’t set the css class.

Try to use the attached file
dhtmlxchart.zip (17.1 KB)

#7

Perfect thanks … now a simple CSS update and I have Rotated text …Thanks for your help

#8

Hello,

Is is possible to move x-axix and the bars higher so that I can use longer vertical labels?

Thank you.

#9

You can use padding.bottom

docs.dhtmlx.com/doku.php?id=dhtm … barpadding