Format titles present in x-axis

Suite and Optimus Suite 5
#1

Hello Experts,

I am using the dhtmlx chart and the chart is rendering properly. The only issue I am having is my labels in x-Axis are bit long and they are overlapping with each other. Can you please tell me how to format it so that I can tilt the titles and make the labels do not overlap each other.

Any ideas will be really appreciated!!

Thanks.

#2

Hello,

there are several ways:

  1. If you are using “bar” chart, you may use barH. In this case labels will be aligned vertically;

  2. Display each second, third, fourth or fifth label. It can be done by template;

  3. Display all labels, but format them (it can also be done by template);

  4. rotate text of the labels

Which of these approaches you are interested in ?

#3

Hi Alexandra,

I am interested in option 4…rotating text of labels. Can you please show me an example of same.

#4

Hi,

labels of chart axises are absolutely-positioned divs. dhx_axis_item_x - css rule for xAxis labels:

.dhx_axis_item_x{ ... }

Modern browsers support transformations that allows to rotate text. For example:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform:rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);

#5

Thanks Alexandra…Will try and let you know how it goes!