Search code examples
angularkendo-uikendo-chart

how to show x-axis values at top instead of bottom in kendo chart

I want to move x axis at the top for range bar chart in kendo chart for angular 2

sample chart

I am using https://www.telerik.com/kendo-angular-ui/components/charts/series-types/range-bar/

Solution

  • Add <kendo-chart-category-axis-item-labels> inside the <kendo-chart-category-axis-item>. Then set the position to end. The position parameter value must be of type AxisLabelsPosition. So import it from the @progress/kendo-angular-charts package.

    For example:

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

public position: AxisLabelsPosition = "end";

    Also the label rotation will be affected by setting the position. To get the correct rotation of labels, remove [labels]="{ rotation: 'auto' } from kendo-chart-category-axis-item and set [rotation] inside the kendo-chart-category-axis-item-labels.

    Refer this example.