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

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!

score 6 · Accepted Answer · edited Oct 25 '19 at 08:37

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>

How can we use majorGridLines component – Umer Zaman Sep 18 '18 at 13:23 — Umer Zaman, Sep 18 '18 at 13:23

score 0 · Answer 2 · answered Jul 20 '23 at 00:41

Here is an example which shows how to rotate the category axis (in this case Y) and the value axis (in this case x). For good measure I have also labeled the series and rotated those

  <kendo-chart>
    <kendo-chart-area background="#dad6d3"></kendo-chart-area>

    <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [categories]="[2015, 2016, 2017]">
            <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-value-axis>
        <kendo-chart-value-axis-item >
            <kendo-chart-value-axis-item-labels [rotation]="45">
            </kendo-chart-value-axis-item-labels>
        </kendo-chart-value-axis-item>
    </kendo-chart-value-axis>
    
    <kendo-chart-series>
        <kendo-chart-series-item type="bar" [data]="[1, 2, 3]" color="#002c5f" [gap]="1"
            [labels]="labelOptions"></kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>

Where label options are:

labelOptions: SeriesLabels = {
  format: '{0}',
  background: '#dad6d3',
  visible: true,
  rotation: 45,
}

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

2 Answers2