AxisDefaultsComponent

The default options for all Chart axes. Accepts the options which are supported by categoryAxis, valueAxis, xAxis, and yAxis.

Copy Codeimport { 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

The background color of the axis.

color

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

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

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

The plot bands of the axis.

reverse

If set to true, the axis direction is reversed. By default, categories are listed from left to right and from bottom to top.

startAngle

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

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.

Copy Codeitem.notifyChanges({ visible: true });

Parameters

changes

An object containing the updated input fields.