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

Question

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/

Answer 1

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.