How to set text value for kendo-chart-category-axi

Question

I want to show chart category axis label at the start of the chart, for that I am using AxisLabelsPosition . Its showing at the start but its also showing on the x-axis .

I donot want to show on the x-axis. Is there any way we can achieve this.

Here is my plunker: https://plnkr.co/edit/SSMONz3yuRndAxNOKu0K?p=preview This is the same code sample given on Kendo Official site

/app.component.ts/

import { Component } from '@angular/core';
import { AxisLabelsPosition } from '@progress/kendo-angular-charts';
import { mockData } from './weather-data';

@Component({
    selector: 'my-app',
    styles: [ '.k-radio-label { margin: 10px 1em 10px 0; }' ],
    template: `
      <div class="example-config">
        <div class="col-sm example-col">
          <h6>Category axis - Label position</h6>

          <input id="catOnAxis" type="radio" name="cat" class="k-radio"
                 value="onAxis" [(ngModel)]="categoryLabelsPosition" />
          <label for="catOnAxis" class="k-radio-label">On Axis</label>

          <input id="catStart" type="radio" name="cat" class="k-radio"
                 value="start" [(ngModel)]="categoryLabelsPosition" />
          <label for="catStart" class="k-radio-label">Start</label>

          <input id="catEnd" type="radio" name="cat" class="k-radio"
                 value="end" [(ngModel)]="categoryLabelsPosition" />
          <label for="catEnd" class="k-radio-label">End</label>
        </div>

        <div class="col-sm example-col">
          <h6>Value axis - Label position</h6>

          <input id="valOnAxis" type="radio" name="val" class="k-radio"
                 value="onAxis" [(ngModel)]="valueLabelsPosition" />
          <label for="valOnAxis" class="k-radio-label">On Axis</label>

          <input id="valStart" type="radio" name="val" class="k-radio"
                 value="start" [(ngModel)]="valueLabelsPosition" />
          <label for="valStart" class="k-radio-label">Start</label>

          <input id="valEnd" type="radio" name="val" class="k-radio"
                 value="end" [(ngModel)]="valueLabelsPosition" />
          <label for="valEnd" class="k-radio-label">End</label>
        </div>
      </div>

      <kendo-chart>
        <kendo-chart-series>
          <kendo-chart-title text="Daily Max (&deg;C)"></kendo-chart-title>
          <kendo-chart-series-item type="column" [data]="data"
                                   field="TMax" categoryField="Date">
          </kendo-chart-series-item>
        </kendo-chart-series>

        <kendo-chart-category-axis>
            <kendo-chart-category-axis-item [title]="{text:'testing'}">
                <kendo-chart-category-axis-item-labels [position]="categoryLabelsPosition">
                </kendo-chart-category-axis-item-labels>
            </kendo-chart-category-axis-item>
        </kendo-chart-category-axis>

        <kendo-chart-value-axis>
            <kendo-chart-value-axis-item>
                <kendo-chart-value-axis-item-labels [position]="valueLabelsPosition">
                </kendo-chart-value-axis-item-labels>
            </kendo-chart-value-axis-item>
        </kendo-chart-value-axis>
      </kendo-chart>
    `
})
export class AppComponent {
    public categoryLabelsPosition: AxisLabelsPosition = 'start';
    public valueLabelsPosition: AxisLabelsPosition = 'onAxis';
    public data: any[] = mockData();
}

/** weather-data.ts **/

const data = (): any[] =>
[
  {
    Timestamp: '2018-01-01T00:00:00.000',
    TMax: 3.3,
    TMin: -12,
    Wind: 5.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-02T00:00:00.000',
    TMax: 5.2,
    TMin: -115550,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-03T00:00:00.000',
    TMax: 3.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-04T00:00:00.000',
    TMax: 11,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-05T00:00:00.000',
    TMax: 9,
    TMin: 0,
    Wind: 21.7,
    Rain: 1.8
  },
  {
    Timestamp: '2018-01-06T00:00:00.000',
    TMax: 2,
    TMin: -1,
    Wind: 21.7,
    Rain: 19.7
  },
  {
    Timestamp: '2018-01-07T00:00:00.000',
    TMax: 2,
    TMin: -3,
    Wind: 24.5,
    Rain: 1.3
  },
  {
    Timestamp: '2018-01-08T00:00:00.000',
    TMax: 3,
    TMin: -2,
    Wind: 16.4,
    Rain: 0.8
  },
  {
    Timestamp: '2018-01-09T00:00:00.000',
    TMax: 3,
    TMin: -7,
    Wind: 13.6,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-10T00:00:00.000',
    TMax: 2.2,
    TMin: -8,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-11T00:00:00.000',
    TMax: 4,
    TMin: -6,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-12T00:00:00.000',
    TMax: 5.5,
    TMin: -6,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-13T00:00:00.000',
    TMax: 2.7,
    TMin: -2,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-14T00:00:00.000',
    TMax: 0,
    TMin: -6,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-15T00:00:00.000',
    TMax: -1,
    TMin: -6,
    Wind: 27.1,
    Rain: 0
  },
  {
    Timestamp: '2018-01-16T00:00:00.000',
    TMax: 0,
    TMin: -7,
    Wind: 24.5,
    Rain: 0
  },
  {
    Timestamp: '2018-01-17T00:00:00.000',
    TMax: 1,
    TMin: -7,
    Wind: 21.7,
    Rain: 0
  },
  {
    Timestamp: '2018-01-18T00:00:00.000',
    TMax: 5,
    TMin: -6,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-19T00:00:00.000',
    TMax: 6,
    TMin: -3,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-20T00:00:00.000',
    TMax: 3,
    TMin: -3,
    Wind: 29.9,
    Rain: 7.2
  },
  {
    Timestamp: '2018-01-21T00:00:00.000',
    TMax: 2.2,
    TMin: -7,
    Wind: 19,
    Rain: 1.5
  },
  {
    Timestamp: '2018-01-22T00:00:00.000',
    TMax: 6.2,
    TMin: -8,
    Wind: 8.1,
    Rain: 0.3
  },
  {
    Timestamp: '2018-01-23T00:00:00.000',
    TMax: 6,
    TMin: -2,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-24T00:00:00.000',
    TMax: 2.4,
    TMin: -2,
    Wind: 16.4,
    Rain: 5.1
  },
  {
    Timestamp: '2018-01-25T00:00:00.000',
    TMax: -1.4,
    TMin: -9,
    Wind: 16.4,
    Rain: 17.2
  },
  {
    Timestamp: '2018-01-26T00:00:00.000',
    TMax: 0,
    TMin: -8,
    Wind: 10.9,
    Rain: 5.9
  },
  {
    Timestamp: '2018-01-27T00:00:00.000',
    TMax: -2.7,
    TMin: -9,
    Wind: 16.4,
    Rain: 0
  },
  {
    Timestamp: '2018-01-28T00:00:00.000',
    TMax: -2.4,
    TMin: -14,
    Wind: 19,
    Rain: 0
  },
  {
    Timestamp: '2018-01-29T00:00:00.000',
    TMax: -5,
    TMin: -20,
    Wind: 13.6,
    Rain: 0
  },
  {
    Timestamp: '2018-01-30T00:00:00.000',
    TMax: -5.4,
    TMin: -22,
    Wind: 5.5,
    Rain: 0
  }
];

export const mockData = () =>
  data().map(p => {
    p.Date = new Date(p.Timestamp);
    //alert(p.Date)
    return p;
  }
);

Answer 1

Title is a single line of text. Setting the table Title by simply editing this line:

  <kendo-chart>
    <kendo-chart-title text="Title" position="bottom"></kendo-chart-title>
  </kendo-chart>

By setting position you can decide where the text will be rendered.

Labels repeat for each chart item. Removing/Setting the labels (axis-item-labels) for each data item:

  <kendo-chart>
    <kendo-chart-series>
      <kendo-chart-series-item type="column" [data]="data" field="TMax">
      </kendo-chart-series-item>
    </kendo-chart-series>
  </kendo-chart>

Answer 2

Should be possible to avoid the duplicate title with a second axis:

<kendo-chart-category-axis>
    <kendo-chart-category-axis-item >
        <kendo-chart-category-axis-item-labels rotation="auto" [position]="categoryLabelsPosition">
        </kendo-chart-category-axis-item-labels>
    </kendo-chart-category-axis-item>
    <kendo-chart-category-axis-item [title]="{text:'testing'}" [line]="{ visible: false }" name="titleAxis">
    </kendo-chart-category-axis-item>
</kendo-chart-category-axis>

<kendo-chart-value-axis>
    <kendo-chart-value-axis-item  [axisCrossingValue]="[0, -1000]">
        <kendo-chart-value-axis-item-labels [position]="valueLabelsPosition">
        </kendo-chart-value-axis-item-labels>
    </kendo-chart-value-axis-item>
</kendo-chart-value-axis>

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

I would also report this as bug. The title showing at both places does not seem right to me.