Chart Axis Labels Orientation


#1

Dear all,

I am trying to create a bar chart with several bars.
The problem is that since the bars are many, the x-axis labels overlap. Is it possible to change the x-axis labels orientation to be vertical. For example :
Instead of being : 2014
to be:
2
0
1
4

Regards


#2

Hello
You can oly rotate labels like on the picture.


You need the next style for it:

.dhx_canvas_text.dhx_axis_item_x{ display: block; writing-mode: tb-rl; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .dhx_axis_item_x{ padding-top: 80px }
Or you can rotate it other way, just use -90 instead 90.


#3

Dear Darya,

Thank you very much for your reply. I tried the proposed solution but the chart rendering has some issues. The labels and the bars overlap.

I am attaching an image.

S.



#4

Hello,

try the following css:

.dhx_canvas_text.dhx_axis_item_x{ display: block; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); text-align: right; height: 50px; line-height: 50px; }

Also you can use horizontal bars:
dhtmlxChart/samples/06_bar_chart/07_horizonal_bars.html
dhtmlx.com/docs/products/dht … _bars.html

In this demo, you will need to increase left padding:

padding:{
left: 100
}