angularkendo-ui-angular2kendo-chart

Kendo UI angular - Rotate labels of x-axis in bar chart


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!


Solution

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