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 AxisDefaultsCrosshair

The crosshair configuration options.
The crosshair is displayed when the axisDefaults.crosshair.visible option is set to true.

labels AxisDefaultsLabels

The configuration of the axis labels.

line AxisLine

The configuration of the axis lines. Also affects the major and minor ticks, but not the grid lines.

majorGridLines GridLines

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 AxisTicks

The configuration of the axis major ticks.

minorGridLines GridLines

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 AxisTicks

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 AxisDefaultsTitle

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.