Positioning axis title off chart according to opposite axis

3 posts, 1 answers
  1. esp
    esp avatar
    20 posts
    Member since:
    Jul 2016

    Posted 04 Jan Link to this post

    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. Answer
    Svetlin
    Admin
    Svetlin avatar
    467 posts

    Posted 06 Jan Link to this post

    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/.

  3. esp
    esp avatar
    20 posts
    Member since:
    Jul 2016

    Posted 06 Jan in reply to Svetlin Link to this post

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