This is a migrated thread and some comments may be shown as answers.

Positioning axis title off chart according to opposite axis

2 Answers 6 Views
Charts
This is a migrated thread and some comments may be shown as answers.
esp
Top achievements
Rank 1
Veteran
esp asked on 05 Jan 2021, 02:46 AM

https://stackblitz.com/edit/angular-bjwgmd?file=app/app.component.ts

The position property of the axis titles only allows positioning along its axis. Is there a way to have in the chart linked above, the axis titles appear off the chart? For instance, for the x-axis title to be positioned at the bottom of the y-axis (and vice versa)?

I'm aware of the padding property but this would require updating each time the chart is resized.

2 Answers, 1 is accepted

Sort by
0
Accepted
Svet
Telerik team
answered on 06 Jan 2021, 03:21 PM

Hi,

Thank you for the provided example.

What could be done is to add additional dummy x and y axis to show the desired titles and position them on the proper spots by using the [axisCrossingValue] input properties of the axis. Please check the following example demonstrating such approach:

https://stackblitz.com/edit/angular-bjwgmd-qbuchm?file=app/app.component.ts

The essential parts are highlighted below:

    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item
          type="bubble"
          [data]="data"
          xField="x"
          yField="y"
          sizeField="size"
          categoryField="category"
        >
        </kendo-chart-series-item>

        <kendo-chart-x-axis>
          <kendo-chart-x-axis-item
            [axisCrossingValue]="[0, 100]"
            [min]="-100"
            [max]="100"
            [reverse]="true"
          >
            <kendo-chart-x-axis-item-labels rotation="auto">
            </kendo-chart-x-axis-item-labels>
          </kendo-chart-x-axis-item>
          <kendo-chart-x-axis-item
            [labels]="{ visible: false }"
            [title]="{ text: 'x axis title' }"
          >
          </kendo-chart-x-axis-item>
        </kendo-chart-x-axis>
        <kendo-chart-y-axis>
          <kendo-chart-y-axis-item
            [axisCrossingValue]="[0, 100]"
            [min]="-100"
            [max]="100"
            [reverse]="true"
          >
          </kendo-chart-y-axis-item>
          <kendo-chart-y-axis-item
            [labels]="{ visible: false }"
            [title]="{ text: 'y axis title' }"
          >
          </kendo-chart-y-axis-item>
        </kendo-chart-y-axis>
        <kendo-chart-legend [visible]="false"> </kendo-chart-legend>
      </kendo-chart-series>
    </kendo-chart>

I hope that helps.

Regards,
Svetlin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
esp
Top achievements
Rank 1
Veteran
answered on 06 Jan 2021, 11:24 PM
Thanks, I hadn't considered that approach, that work's great.
Tags
Charts
Asked by
esp
Top achievements
Rank 1
Veteran
Answers by
Svet
Telerik team
esp
Top achievements
Rank 1
Veteran
Share this question
or