Position of chart axis

[Torben]

How do you position e.g. the Y-Axis to the right?

[Dimiter Topalov]

Hello Torben,

You can use the kendo-chart-category-axis-item and the kendo-chart-value-axis-item's properties to configure various axis options:

https://www.telerik.com/kendo-angular-ui/components/charts/chart/elements/axes/#toc-categorical-chart-axes

The point(s) at which a given axis is intersecting its perpendicular counterpart(s) can be configured by providing an array of value(s) to the axisCrossingValue property. To put the vertical (value) axis on the right-hand side of the chart, provide a value that is greater than the biggest index in the "categories" array to the category axis item's axisCrossingValue property, e.g.:

https://plnkr.co/edit/uZn0gCzPsRuXuX80ORt7?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Torben]

It helps with a subset of my charts.

But... I also have to show paretos, having both a left side Y-Axis and a right side Y-Axis. Using the axisCrossingValue put all axis either to the left or to the right.

Also, it seems kind of weird to have the CategoryAxis determine the position of the Y-Axis?

 

[Dimiter Topalov]

Hello Torben,

You can configure multiple vertical (or horizontal) axes by providing the respective number of kendo-chart-{{axis type}}axis-item components, and set each of the crossing points for these axes, e.g.:

<kendo-chart-category-axis>
              <kendo-chart-category-axis-item [axisCrossingValue]="[0, 1e6]"></kendo-chart-category-axis-item>
            </kendo-chart-category-axis>
            <kendo-chart-value-axis>
              <kendo-chart-value-axis-item></kendo-chart-value-axis-item>
              <kendo-chart-value-axis-item></kendo-chart-value-axis-item>
            </kendo-chart-value-axis>

The reasoning behind the category axis component's axisCrossingValue property to control the crossing points for the value axis(axes) is that these are points on the category axis, determining where the other (perpendicular) axes will cross the horizontal axis. I hope this makes sense.

Regards,
Dimiter Topalov
Progress Telerik

[Dimiter Topalov]

Hello Torben,

Here is the updated example, demonstrating the described approach:

https://plnkr.co/edit/Sa3mD7LVpQkp6x4UqQwh?p=preview

Regards,
Dimiter Topalov
Progress Telerik