Vertical x-Axis labels?


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 …


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


you can use

template:function(obj, common, data){ if ( return; 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 )


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 :


Bikes on Hire

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 ?


Try using dhtmlxchart.js attached here:


it sets class for x-axis labels

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

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

Try to use the attached file (17.1 KB)

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


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

Thank you.

You can use padding.bottom … barpadding