Title and Subtitle in Angular Sankey component

25 Mar 202611 minutes to read

The Sankey Chart supports adding descriptive titles and subtitles to provide context and information about your data visualization. These text elements help users quickly understand the purpose and content of the diagram. You can fully customize the text, styling, alignment, and appearance using dedicated properties.

This guide covers title and subtitle configuration, styling options, and best practices for effective diagram labeling.

Properties

Property	Type	Description
title	string	The main title text displayed at the top of the chart.
subTitle	string	The subtitle text displayed below the main title.
titleStyle	object	Styling options for the title text.
subTitleStyle	object	Styling options for the subtitle text.

Title/Subtitle Style Properties

Both titleStyle and subTitleStyle support the following properties:

Property	Type	Default	Description
size	string	null	Font size for the text.
fontWeight	string	null	Font weight (e.g., ‘400’, ‘700’).
fontFamily	string	null	Font family name.
color	string	null	Text color.
fontStyle	string	‘normal’	Font style (‘normal’ or ‘italic’).
opacity	number	1	Text opacity (0 to 1).
textAlignment	string	‘Center’	Text alignment (‘Left’, ‘Center’, ‘Right’).

Basic Title and Subtitle

Add a main title and descriptive subtitle to your Sankey Chart to provide context about the data visualization:

app.component.ts

import { Component } from '@angular/core';
import { SankeyAllModule } from '@syncfusion/ej2-angular-charts';
import {
  SankeyTooltipService,
  SankeyLegendService
} from '@syncfusion/ej2-angular-charts';

@Component({
  imports: [SankeyAllModule],
  providers: [
    SankeyTooltipService,
    SankeyLegendService
  ],
  standalone: true,
  selector: 'app-container',
  template: `
   <div class="control-pane">
      <div class="control-section"  id="sankey-container">
  <ejs-sankey
    width="90%"
    height="450px"
    title="Energy Flow Diagram"
    subTitle="Agricultural Energy Conversion">

    <e-sankey-nodes>
      <e-sankey-node id="Agricultural Waste"></e-sankey-node>
      <e-sankey-node id="Biomass Residues"></e-sankey-node>
      <e-sankey-node id="Bio-conversion"></e-sankey-node>
      <e-sankey-node id="Liquid Biofuel"></e-sankey-node>
      <e-sankey-node id="Electricity"></e-sankey-node>
      <e-sankey-node id="Heat"></e-sankey-node>
    </e-sankey-nodes>

    <e-sankey-links>
      <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" [value]="84.152"></e-sankey-link>
      <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" [value]="24.152"></e-sankey-link>
      <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" [value]="10.597"></e-sankey-link>
      <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" [value]="36.862"></e-sankey-link>
      <e-sankey-link sourceId="Bio-conversion" targetId="Heat" [value]="60.845"></e-sankey-link>
    </e-sankey-links>

  </ejs-sankey>
      </div>
    </div>`
})
export class AppComponent { }

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customized Title and Subtitle Styling

Apply custom styling to both the title and subtitle, including font properties, colors, alignment, and opacity to match design requirements.

app.component.ts

import { Component } from '@angular/core';
import { SankeyAllModule } from '@syncfusion/ej2-angular-charts';
import {
  SankeyTooltipService,
  SankeyLegendService,
  SankeyExportService
} from '@syncfusion/ej2-angular-charts';

@Component({
  imports: [SankeyAllModule],
  providers: [
    SankeyTooltipService,
    SankeyLegendService,
    SankeyExportService
  ],
  standalone: true,
  selector: 'app-container',
  template: `
 <div class="control-pane">
      <div class="control-section"  id="sankey-container">
  <ejs-sankey
    width="90%"
    height="450px"
    title="Energy Flow Diagram"
    subTitle="Agricultural Energy Conversion"
    [titleStyle]="titleStyle"
    [subTitleStyle]="subtitleStyle">

    <e-sankey-nodes>
      <e-sankey-node id="Agricultural Waste"></e-sankey-node>
      <e-sankey-node id="Biomass Residues"></e-sankey-node>
      <e-sankey-node id="Bio-conversion"></e-sankey-node>
      <e-sankey-node id="Liquid Biofuel"></e-sankey-node>
      <e-sankey-node id="Electricity"></e-sankey-node>
      <e-sankey-node id="Heat"></e-sankey-node>
    </e-sankey-nodes>

    <e-sankey-links>
      <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" [value]="84.152"></e-sankey-link>
      <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" [value]="24.152"></e-sankey-link>
      <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" [value]="10.597"></e-sankey-link>
      <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" [value]="36.862"></e-sankey-link>
      <e-sankey-link sourceId="Bio-conversion" targetId="Heat" [value]="60.845"></e-sankey-link>
    </e-sankey-links>

  </ejs-sankey>
      </div>
    </div>`
})
export class AppComponent {
  titleStyle = {
    fontFamily: 'Arial',
    fontStyle: 'italic',
    fontWeight: 'bold',
    size: '18px',
    color: '#1F77B4'
  };

  subtitleStyle = {
    fontFamily: 'Arial',
    fontStyle: 'normal',
    fontWeight: 'normal',
    size: '14px',
    color: '#FF7F0E'
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Title Only (Without Subtitle)

Add only a title to the Sankey Chart when a subtitle is not needed. This provides a clean, minimal header for your visualization:

app.component.ts

import { Component } from '@angular/core';
import { SankeyAllModule } from '@syncfusion/ej2-angular-charts';
import {
  SankeyTooltipService,
  SankeyLegendService,
  SankeyExportService
} from '@syncfusion/ej2-angular-charts';

@Component({
  imports: [SankeyAllModule],
  providers: [
    SankeyTooltipService,
    SankeyLegendService,
    SankeyExportService
  ],
  standalone: true,
  selector: 'app-container',
  template: `
   <div class="control-pane">
      <div class="control-section"  id="sankey-container">
  <ejs-sankey
    width="90%"
    height="450px"
    title="Energy Flow Diagram">

    <e-sankey-nodes>
      <e-sankey-node id="Agricultural Waste"></e-sankey-node>
      <e-sankey-node id="Biomass Residues"></e-sankey-node>
      <e-sankey-node id="Bio-conversion"></e-sankey-node>
      <e-sankey-node id="Liquid Biofuel"></e-sankey-node>
      <e-sankey-node id="Electricity"></e-sankey-node>
      <e-sankey-node id="Heat"></e-sankey-node>
    </e-sankey-nodes>

    <e-sankey-links>
      <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" [value]="84.152"></e-sankey-link>
      <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" [value]="24.152"></e-sankey-link>
      <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" [value]="10.597"></e-sankey-link>
      <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" [value]="36.862"></e-sankey-link>
      <e-sankey-link sourceId="Bio-conversion" targetId="Heat" [value]="60.845"></e-sankey-link>
    </e-sankey-links>

  </ejs-sankey>
      </div>
    </div>`
})
export class AppComponent { }

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Title with Different Alignments

Control the alignment of title and subtitle text.

app.component.ts

import { Component } from '@angular/core';
import { SankeyAllModule } from '@syncfusion/ej2-angular-charts';
import {
  SankeyTooltipService,
  SankeyLegendService,
} from '@syncfusion/ej2-angular-charts';

@Component({
  imports: [SankeyAllModule],
  providers: [
    SankeyTooltipService,
    SankeyLegendService
  ],
  standalone: true,
  selector: 'app-container',
  template: `
   <div class="control-pane">
      <div class="control-section"  id="sankey-container">
  <ejs-sankey
    width="90%"
    height="450px"
    title="Energy Flow Diagram"
    subTitle="Agricultural Energy Conversion"
    [titleStyle]="titleStyle"
    [subTitleStyle]="subtitleStyle">

    <e-sankey-nodes>
      <e-sankey-node id="Agricultural Waste"></e-sankey-node>
      <e-sankey-node id="Biomass Residues"></e-sankey-node>
      <e-sankey-node id="Bio-conversion"></e-sankey-node>
      <e-sankey-node id="Liquid Biofuel"></e-sankey-node>
      <e-sankey-node id="Electricity"></e-sankey-node>
      <e-sankey-node id="Heat"></e-sankey-node>
    </e-sankey-nodes>

    <e-sankey-links>
      <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" [value]="84.152"></e-sankey-link>
      <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" [value]="24.152"></e-sankey-link>
      <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" [value]="10.597"></e-sankey-link>
      <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" [value]="36.862"></e-sankey-link>
      <e-sankey-link sourceId="Bio-conversion" targetId="Heat" [value]="60.845"></e-sankey-link>
    </e-sankey-links>

  </ejs-sankey>
      </div>
    </div>`
})
export class AppComponent {
  titleStyle = { textAlignment: 'Center' };
  subtitleStyle = { textAlignment: 'Near' };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Title Best Practices

• Descriptive: Use clear, descriptive titles that explain what the chart shows.
• Concise: Keep titles brief and to the point.
• Hierarchy: Make the title larger and bolder than the subtitle.
• Readability: Ensure sufficient contrast between text color and background.
• Font Choice: Use readable fonts like Segoe UI, Arial, or Verdana.