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!
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>