Kendo UI angular - 在条形图中旋转 x 轴的标签

Question

I am trying to rotate labels of x-axis in smaller screens to make sure that labels do not overlap each other.

CODE

<kendo-chart *ngIf="!yearLoader" (seriesClick)="barClick($event)">
      <kendo-chart-tooltip format="{0} events"></kendo-chart-tooltip>

       <kendo-chart-category-axis>
            <kendo-chart-category-axis-item [categories]="yearChartData.months">
            </kendo-chart-category-axis-item>
       </kendo-chart-category-axis>

       <kendo-chart-series>
            <kendo-chart-series-item [spacing]="1" [data]="yearChartData.count" type="column"></kendo-chart-series-item>
       </kendo-chart-series>
</kendo-chart>

When i was going through the API Documentation I found rotation property in kendo-chart-x-axis-item-labels . I think that could be the solution to my problem. But, I don't know how to use that in my code. Can anybody help me out?

Thanks in advance!

Answer 1

You can rotate labels of the x axis or (category-axis) by nesting a kendo-chart-category-axis-item-labels component within the kendo-chart-category-axis-item component. ( Example )

<kendo-chart *ngIf="!yearLoader" (seriesClick)="barClick($event)">
    ...

    <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [categories]="yearChartData.months">

            <kendo-chart-category-axis-item-labels [rotation]="45">
            </kendo-chart-category-axis-item-labels>

        </kendo-chart-category-axis-item>
    </kendo-chart-category-axis>

    ...
</kendo-chart>

In case you want to rotate all labels ( x and y axis) use kendo-chart-axis-defaults-labels component and nest it within the kendo-chart component.

<kendo-chart *ngIf="!yearLoader" (seriesClick)="barClick($event)">

    <kendo-chart-axis-defaults-labels [rotation]="45">
    </kendo-chart-axis-defaults-labels>

    ...
</kendo-chart>