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 (°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;
}
);
