All Components

Labels

The Chart enables you to set the appearance and customize the content of the series and axis labels.

Setting the Appearance

You can control the appearance of the labels through the following properties:

  • background
  • border
  • color
  • font
  • margin
  • padding

The following example demonstrates how to customize the appearance of the axis label by using the ValueAxisLabels setting.

import { Component } from '@angular/core';
import { ValueAxisLabels } from '@progress/kendo-angular-charts';

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-category-axis>
              <kendo-chart-category-axis-item [categories]="categories">
                  <kendo-chart-category-axis-item-labels color="#0a0">
                  </kendo-chart-category-axis-item-labels>
              </kendo-chart-category-axis-item>
          </kendo-chart-category-axis>

          <kendo-chart-value-axis>
              <kendo-chart-value-axis-item [labels]="valueAxisLabels">
                <!--                       ^^^^^^^^
                     It is also possible to bind all settings to a field.
                -->
              </kendo-chart-value-axis-item>
          </kendo-chart-value-axis>

          <kendo-chart-series>
            <kendo-chart-series-item [data]="seriesData" type="line">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
export class AppComponent {
    public seriesData: number[] = [20, 40, 45, 30, 50];
    public categories: string[] = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];

    public valueAxisLabels: ValueAxisLabels = {
      padding: 3,
      font: 'bold 16px Arial, sans-serif'
    };
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

The following example demonstrates how to customize the appearance of the series label by using the SeriesLabels setting.

import { Component } from '@angular/core';
import { SeriesLabels } from '@progress/kendo-angular-charts';

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-series>
            <kendo-chart-series-item [data]="seriesData" type="line"
                                     [labels]="seriesLabels">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
export class AppComponent {
    public seriesData: number[] = [20, 40, 45, 30, 50];
    public categories: string[] = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];

    public seriesLabels: SeriesLabels = {
      visible: true, // Note that visible defaults to false
      padding: 3,
      font: 'bold 16px Arial, sans-serif'
    };
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Customizing the Content

Normally, the series and axis Chart labels display an unformatted numeric value or a category name.

You can override the Chart label content by:

Using Format Strings

The Chart enables you to assign a format string for the label. For the full list of available formats, refer to the kendo-intl library.

Formatting Labels as Currency Values

The following example demonstrates how to format the value axis labels as a currency value.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-axis-defaults>
            <kendo-chart-axis-defaults-labels format="c0">
            </kendo-chart-axis-defaults-labels>
          </kendo-chart-axis-defaults>

          <kendo-chart-series>
            <kendo-chart-series-item [data]="seriesData" type="line">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
export class AppComponent {
    public seriesData: number[] = [2034, 40124, 45234, 30234, 50234];
    public categories: string[] = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
}

The following example demonstrates how to format the series labels as a currency value.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-series>
            <kendo-chart-series-item [data]="seriesData" type="line">
              <kendo-chart-series-item-labels format="c0">
              </kendo-chart-series-item-labels>
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
export class AppComponent {
    public seriesData: number[] = [2034, 40124, 45234, 30234, 50234];
}

Formatting Placeholders

Format strings for series labels can contain multiple value placeholders—for example, an X and Y value for the Scatter series. The following table lists the available placeholders.

Series Type Placeholders
Area, Bar, Column, Funnel, Line, and Pie {0}—value
Box Plot
  • {0}—lower
  • {1}—q1
  • {2}—median
  • {3}—q3
  • {4}—upper
  • {5}—mean
  • {6}—category
Bubble
  • {0}—X value
  • {1}—Y value
  • {2}—size value
  • {3}—category name
Bullet
  • {0}—current
  • {1}—target
RangeBar and RangeArea
  • {0}—from
  • {1}—to
Scatter and ScatterLine
  • {0}—X value
  • {1}—Y value
Candlestick and OHLC
  • {0}—open value
  • {1}—high value
  • {2}—low value
  • {3}—close value
  • {4}—category name

The following example demonstrates how to use value placeholders for the Scatter series labels.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item type="scatter"
                                 [data]="weatherData"
                                 xField="rainfall" yField="windSpeed">
            <kendo-chart-series-item-labels format="{1:N1} mm; {0:N1} km/h">
            </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent {
  public weatherData = [
    { windSpeed: 16.4, rainfall: 5.4 },
    { windSpeed: 21.7, rainfall: 2 },
    { windSpeed: 25.4, rainfall: 3 },
    { windSpeed: 19, rainfall: 2 },
    { windSpeed: 10.9, rainfall: 1 },
    { windSpeed: 13.6, rainfall: 3.2 },
    { windSpeed: 10.9, rainfall: 7.4 },
    { windSpeed: 10.9, rainfall: 0 },
    { windSpeed: 10.9, rainfall: 8.2 },
    { windSpeed: 16.4, rainfall: 0 },
    { windSpeed: 16.4, rainfall: 1.8 },
    { windSpeed: 13.6, rainfall: 0.3 },
    { windSpeed: 29.9, rainfall: 0 },
    { windSpeed: 27.1, rainfall: 2.3 },
    { windSpeed: 16.4, rainfall: 0 },
  ];
}

Setting Content Callbacks

If provided, a content function is called to compute the text of each label. The function receives different parameters depending on the context. For more information, refer to the documentation on CategoryAxisLabelsComponent.content, ValueAxisLabelsComponent.content, and SeriesLabelsComponent.content.

The following example demonstrates how to override the content of the axis labels.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-value-axis>
              <kendo-chart-value-axis-item>
                  <kendo-chart-value-axis-item-labels [content]="labelContent">
                  </kendo-chart-value-axis-item-labels>
              </kendo-chart-value-axis-item>
          </kendo-chart-value-axis>

          <kendo-chart-series>
            <kendo-chart-series-item [data]="seriesData" type="line">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
export class AppComponent {
    public seriesData: number[] = [20, 40, 45, 30, 50];
    public categories: string[] = ['#1', '#2', '#3', '#4', '#5'];
    private suffix: string = ' ms';

    // Notice that to capture 'this', the approach utilizes
    // a lambda function instead of a method
    public labelContent = (e: any) => {
      return e.value + this.suffix;
    }
}

The following example demonstrates how to override the content of the series labels.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-series>
            <kendo-chart-series-item [data]="seriesData" type="line">
              <kendo-chart-series-item-labels [content]="labelContent">
              </kendo-chart-series-item-labels>
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
export class AppComponent {
    public seriesData: number[] = [20, 40, 45, 30, 50];
    private suffix: string = ' ms';

    // Notice that to capture 'this', the approach utilizes
    // a lambda function instead of a method
    public labelContent = (e: any) => {
      return e.value + this.suffix;
    }
}

Rendering Custom Visuals

You can customize the rendering of labels by using a visual function. The function receives a single parameter of type AxisLabelVisualArgs or SeriesLabelsVisualArgs, and returns a group of Drawing primitives to represent the label.

The following example demonstrates how to override the rendering of the axis labels.

import { Component } from '@angular/core';
import { AxisLabelVisualArgs } from '@progress/kendo-angular-charts';
import { Group, Path } from '@progress/kendo-drawing';

@Component({
  selector: 'my-app',
  template: `
      <kendo-chart>
        <kendo-chart-value-axis>
            <kendo-chart-value-axis-item>
                <kendo-chart-value-axis-item-labels [visual]="labelVisual">
                </kendo-chart-value-axis-item-labels>
            </kendo-chart-value-axis-item>
        </kendo-chart-value-axis>

        <kendo-chart-series>
          <kendo-chart-series-item [data]="seriesData" type="line">
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
  `
})
export class AppComponent {
  public seriesData: number[] = [2034, 40124, 45234, 30234, 50234];
  public categories: string[] = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];

  // Notice that to capture 'this', the approach utilizes
  // a lambda function instead of a method
  public labelVisual = (e: AxisLabelVisualArgs) => {
    const defaultLabel = e.createVisual();

    if (e.value < 40000) {
      return defaultLabel;
    }

    const path = new Path({
      stroke: {
        color: 'red',
        width: 1
      }
    });

    const bbox = defaultLabel.bbox();
    path.moveTo(bbox.bottomLeft()).lineTo(bbox.bottomRight());

    const group = new Group();
    group.append(defaultLabel, path);

    return group;
  }
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

The following example demonstrates how to override the rendering of the series labels.

import { Component } from '@angular/core';
import { SeriesLabelVisualArgs } from '@progress/kendo-angular-charts';
import { Group, Path } from '@progress/kendo-drawing';

@Component({
  selector: 'my-app',
  template: `
      <kendo-chart>
        <kendo-chart-series>
          <kendo-chart-series-item [data]="seriesData" type="line">
            <kendo-chart-series-item-labels [visual]="labelVisual">
            </kendo-chart-series-item-labels>
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
  `
})
export class AppComponent {
  public seriesData: number[] = [2034, 40124, 45234, 30234, 50234];

  // Notice that to capture 'this', the approach utilizes
  // a lambda function instead of a method
  public labelVisual = (e: SeriesLabelVisualArgs) => {
    const defaultLabel = e.createVisual();
    const value = parseFloat(e.text);

    if (value < 40000) {
      return defaultLabel;
    }

    const path = new Path({
      stroke: {
        color: 'red',
        width: 1
      }
    });

    const bbox = defaultLabel.bbox();
    path.moveTo(bbox.topLeft()).lineTo(bbox.topRight());

    const group = new Group();
    group.append(defaultLabel, path);

    return group;
  }
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article