AxisDefaultsComponent
The default options for all Chart axes.
Accepts the options which are supported by categoryAxis
,
valueAxis
,
xAxis
,
and yAxis
.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div style="height: 600px;">
<kendo-chart [categoryAxis]="{ categories: categories }" [chartArea]="{height: 600}" >
<kendo-chart-axis-defaults
[background]="background"
[color]="color"
[crosshair]="crosshair"
[labels]="labels"
[line]="line"
[majorGridLines]="majorGridLines"
[minorGridLines]="minorGridLines"
[majorTicks]="majorTicks"
[minorTicks]="minorTicks"
[title]="title"
></kendo-chart-axis-defaults>
<kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
<kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
<kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
<kendo-chart-series>
<kendo-chart-series-item *ngFor="let item of series"
type="line" style="smooth" [data]="item.data" [name]="item.name">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
</div>
`
})
export class AppComponent {
public series: any[] = [{
name: "India",
data: [4, 8, 8, 9, 9, 9, 3, 8, 9, 6]
}, {
name: "Russian Federation",
data: [4, 7, 7, 6, 8, 8, 5, 8, 4, 4]
}, {
name: "Germany",
data: [0, 0, 1, 1, 4, 3, 1, 5, 4, 3]
},{
name: "World",
data: [2, 3, 4, 4, 4, 4, 1, 2, 4, 3]
}];
public categories: number[] = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];
public background = 'white';
// public color = 'cyan'; // will override the line.color option
public crosshair = {
visible: true
};
public labels = {
font: 'bold 12px/30px Helvetica, Arial, sans-serif',
color: '#4CAF50',
padding: 5,
rotation: 45,
background: 'white',
border: {
color: '#4CAF50',
width: 2
},
};
public line = {
color: 'black',
width: 3
};
public majorGridLines = {
color: 'black',
visible: true
}
public minorGridLines = {
color: 'lightgray',
visible: true
}
public majorTicks = {
color: 'black',
size: 15
}
public minorTicks = {
color: 'lightgray',
size: 10
}
public title = {
text: 'Default Axis Title',
color: 'black',
background: 'white',
border: {
color: 'black',
width: 2
},
padding: 10
}
}
Selector
kendo-chart-axis-defaults
Inputs
background
string
The background color of the axis.
color
string
The color to apply to all axis elements. Accepts a valid CSS color string, including hex and rgb.
crosshair
The crosshair configuration options.
The crosshair is displayed when the axisDefaults.crosshair.visible
option is set to true
.
labels
The configuration of the axis labels.
line
The configuration of the axis lines. Also affects the major and minor ticks, but not the grid lines.
majorGridLines
The configuration of the major grid lines. These are the lines that are an extension of the major ticks through the body of the Chart.
majorTicks
The configuration of the axis major ticks.
minorGridLines
The configuration of the minor grid lines. These are the lines that are an extension of the minor ticks through the body of the Chart.
minorTicks
The configuration of the axis minor ticks.
narrowRange
boolean
If set to true
, the Chart prevents the axis range from snapping to zero.
Setting it to false
, forces the axis range to snap to zero.
pane
string
The name of the pane in which the axis has to be rendered. If not set, the axis will be rendered in the first (default) pane.
plotBands
PlotBand[]
The plot bands of the axis.
reverse
boolean
If set to true
, the axis direction is reversed. By default, categories are listed from left to
right and from bottom to top.
startAngle
number
The angle (degrees) of the first category on the axis. Angles increase clockwise with zero to the left. Negative values are acceptable.
title
The title configuration of the axis.
To display the title, set the axisDefaults.title.text
option.
visible
boolean
If set to true
, the Chart displays the axis. By default, the axis is visible.
Methods
notifyChanges
Updates the component fields with the specified values and refreshes the Chart.
Use this method when the configuration values cannot be set through the template.
item.notifyChanges({ visible: true });
Parameters
changes
any
An object containing the updated input fields.