Components / Charts / API

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
}
}