Chart X Axis Item name overlay problem

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.

Comments

  • 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

  • @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?

  • @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.

  • @annazankevich
    I see. Thank you for your help.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!