Chart X Axis Item name overlay problem

Webix JS
#1

Hello.
I have a question about the Webix chart.

See below address
https://snippet.webix.com/0c1xq2r9

If the name of the Item on the X-axis is out of range, the name overlaps with the consecutive items.

Therefore, I thought that white-space or word-break of CSS attributes should be applied to that class.

However, applying the style above to the class ‘webix_axis_item_x’ will cause another problem.

  1. White-space, word-break will not be applied if width is not specified
  2. When using white-space or word-break after specifying width, text is cut while aligned to the left

What should I do if I don’t want the item names on the X-axis to overlap as mentioned above?

I look forward to your advice.

#2

Hello @JUSTE,
As a solution, you can rotate the xAxis labels using a custom CSS and add the padding to chart:

  .webix_axis_item_x{  
    padding-top:35px;
    padding-left:35px;
    transform: rotate(90deg);           
  }

Please check the following snippet:
https://snippet.webix.com/7qstrd5h

#3

@annazankevich

Thank you for your answer.
However, there is a problem with applying the Padding option.
Unlike the example, the length of the item name is flexible.

Therefore, I think that automatically adjusting the length of the item name will be necessary when I declare the chart.

What should I do?

#4

@JUSTE,

Therefore, I think that automatically adjusting the length of the item name will be necessary when I declare the chart.
Unfortunately, the automatic adjustment of the length of the element name is not possible.

#5

@annazankevich
I see. Thank you for your help.