TitleComponent
The configuration options of the Chart title or text (see example).
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-chart [categoryAxis]="{ categories: categories }">
<kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
<kendo-chart-legend
position="bottom"
orientation="horizontal"
align="end"
background="rgba(255, 0, 0, 0.1)"
[border]="borderOptions"
[margin]="10"
[padding]="10"
[width]="150"
[offsetX]="11"
[offsetY]="-103"
[reverse]="true"
[visible]="isVisible"
></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>
<br /><br />
<button kendoButton (click)="isVisible=!isVisible">Toggle Legend</button>
`
})
export class AppComponent {
public isVisible = true;
public borderOptions = {
color: "rgba(255, 0, 0, 0.8)",
dashType: 'dash',
width: 2
};
public series: any[] = [{
name: "India",
data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
}, {
name: "Russian Federation",
data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
}, {
name: "Germany",
data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
},{
name: "World",
data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
}];
public categories: number[] = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];
}
Selector
kendo-chart-title
Inputs
NAME | TYPE | DEFAULT | DESCRIPTION |
---|---|---|---|
align | "left" | "right" | "center" | The alignment of the title. The available options are:
| |
background | string | The background color of the title. Accepts a valid CSS color string, including hex and rgb. | |
border | The border of the title. | ||
color | string | The text color of the title. Accepts a valid CSS color string, including hex and rgb. | |
font | string | The font of the title. | |
margin | number | Margin | The margin of the title. A numeric value sets all margins. | |
padding | number | Padding | The padding of the title. A numeric value sets all margins. | |
position | "top" | "bottom" | The position of the title. The available options are:
| |
text | string | The text of the chart title. You can also set the text directly for a title with default options. You can split the text into multiple lines by using the line feed characters ("\n"). | |
visible | boolean | If set to |
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.
|
Parameters | ||
---|---|---|
changes | any | An object containing the updated input fields. |