Positioning axis title off chart according to opposite axis

[esp]

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.

[Svet]

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

[esp]

Thanks, I hadn't considered that approach, that work's great.