New to Kendo UI for Angular? Start a free 30-day trial
YAxisComponent
A collection of one or more Y-axis configuration components.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-y-axis>
<kendo-chart-y-axis-item
[background]="'rgba(100, 100, 100, 0.2)'"
color="red"
[notes]="notesConfig"
[crosshair]="crosshairConfig">
</kendo-chart-y-axis-item>
<kendo-chart-y-axis-item name="secondAxis">
</kendo-chart-y-axis-item>
</kendo-chart-y-axis>
<kendo-chart-series>
<kendo-chart-series-item type="scatter" [data]="[[1, 2]]">
</kendo-chart-series-item>
<kendo-chart-series-item type="scatter" [data]="[[0.1, 0.2]]"
yAxis="secondAxis">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
public notesConfig = {
data: [{
value: 0.2,
text: "foo"
}, {
value: 0.8,
text: "bar"
}],
label: {
content: (args: any) => args.dataItem.text,
background: 'red',
color: 'white'
},
line: {
color: 'blue',
dashType: 'dash',
length: 150,
width: 2
},
position: 'top'
};
public crosshairConfig = {
color: 'green',
opacity: 0.8,
visible: true,
width: 3
};
}
Selector
kendo-chart-y-axis