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
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.
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.
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
}
…
