Components / Charts / API / TitleComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

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

NAMETYPEDEFAULTDESCRIPTION

align

"left" | "right" | "center"

The alignment of the title.

The available options are:

  • "center"—The text is aligned to the middle.
  • "left"—The text is aligned to the left.
  • "right"—The text is aligned to the right.

background

string

The background color of the title. Accepts a valid CSS color string, including hex and rgb.

border

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:

  • "bottom"—The title is positioned on the bottom.
  • "top"—The title is positioned on the top.

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 true, the Chart displays the title. By default, the title is displayed.

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.

In this article

Not finding the help you need?

Contact Support