Title and subtitle in Angular 3D Circular Chart component

18 Nov 201812 minutes to read

Title

The 3D Circular Chart can be given a title by using the title property to display information about the plotted data.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularChart3DAllModule } from '@syncfusion/ej2-angular-charts'

import { Component, OnInit, ViewChild } from '@angular/core';
import { CircularChart3DComponent } from '@syncfusion/ej2-angular-charts';

@Component({
imports: [
         CircularChart3DAllModule
    ],

providers: [CircularChart3DAllModule],
standalone: true,
  selector: 'app-container',
  template: `
  <ejs-circularchart3d #chart style='display:block;' align='center' [title]='title' [tilt]='tilt' [legendSettings]="legendSettings">
    <e-circularchart3d-series-collection>
    <e-circularchart3d-series [dataSource]='dataSource' xName='x' yName='y' >
    </e-circularchart3d-series></e-circularchart3d-series-collection>
    </ejs-circularchart3d>`
})
export class AppComponent implements OnInit {
  public dataSource?: Object[];
  public legendSettings?: Object;
  public tilt?: number;
  public title?: string;

  @ViewChild('chart')
  public chartObj?: CircularChart3DComponent;

  ngOnInit(): void {
    this.dataSource = [
      { x: 'Saudi Arabia', y: 58 },
      { x: 'Persian Gulf', y: 15 },
      { x: 'Canada', y: 13 },
      { x: 'Venezuela', y: 8 },
      { x: 'Mexico', y: 3 },
      { x: 'Russia', y: 2 },
      { x: 'Miscellaneous', y: 1 }
    ];
    this.legendSettings = { visible: false };
    this.title = 'Oil and other liquid imports in USA',
    this.tilt = -45;
  }

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

Title customization

The title of the 3D Circular Chart can be customized using the titleStyle property.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularChart3DAllModule } from '@syncfusion/ej2-angular-charts'

import { Component, OnInit, ViewChild } from '@angular/core';
import { CircularChart3DComponent } from '@syncfusion/ej2-angular-charts';

@Component({
imports: [
         CircularChart3DAllModule
    ],

providers: [CircularChart3DAllModule],
standalone: true,
  selector: 'app-container',
  template: `
  <ejs-circularchart3d #chart style='display:block;' align='center' [title]='title' [titleStyle]='titleStyle' [tilt]='tilt' [legendSettings]="legendSettings">
    <e-circularchart3d-series-collection>
    <e-circularchart3d-series [dataSource]='dataSource' xName='x' yName='y' >
    </e-circularchart3d-series></e-circularchart3d-series-collection>
    </ejs-circularchart3d>`
})
export class AppComponent implements OnInit {
  public dataSource?: Object[];
  public legendSettings?: Object;
  public tilt?: number;
  public title?: string;
  public titleStyle?: object;

  @ViewChild('chart')
  public chartObj?: CircularChart3DComponent;

  ngOnInit(): void {
    this.dataSource = [
      { x: 'Saudi Arabia', y: 58 },
      { x: 'Persian Gulf', y: 15 },
      { x: 'Canada', y: 13 },
      { x: 'Venezuela', y: 8 },
      { x: 'Mexico', y: 3 },
      { x: 'Russia', y: 2 },
      { x: 'Miscellaneous', y: 1 }
    ];
    this.legendSettings = { visible: false };
    this.title = 'Oil and other liquid imports in USA',
    this.tilt = -45;
    this.titleStyle = {
      fontFamily: "Arial",
      fontStyle: 'italic',
      fontWeight: 'regular',
      color: "#E27F2D",
      size: '23px'
    };
  }

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

Subtitle

The 3D Circular Chart can be given a subtitle by using the subTitle property to display information about the plotted data.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularChart3DAllModule } from '@syncfusion/ej2-angular-charts'

import { Component, OnInit, ViewChild } from '@angular/core';
import { CircularChart3DComponent } from '@syncfusion/ej2-angular-charts';

@Component({
imports: [
         CircularChart3DAllModule
    ],

providers: [CircularChart3DAllModule],
standalone: true,
    selector: 'app-container',
    template: `
  <ejs-circularchart3d #chart style='display:block;' align='center' [title]='title' [subTitle]='subTitle' [tilt]='tilt' [legendSettings]="legendSettings">
    <e-circularchart3d-series-collection>
    <e-circularchart3d-series [dataSource]='dataSource' xName='x' yName='y' >
    </e-circularchart3d-series></e-circularchart3d-series-collection>
    </ejs-circularchart3d>`
})
export class AppComponent implements OnInit {
    public dataSource?: Object[];
    public legendSettings?: Object;
    public tilt?: number;
    public title?: string;
    public subTitle?: string;

    @ViewChild('chart')
    public chartObj?: CircularChart3DComponent;

    ngOnInit(): void {
        this.dataSource = [
            { x: 'Saudi Arabia', y: 58 },
            { x: 'Persian Gulf', y: 15 },
            { x: 'Canada', y: 13 },
            { x: 'Venezuela', y: 8 },
            { x: 'Mexico', y: 3 },
            { x: 'Russia', y: 2 },
            { x: 'Miscellaneous', y: 1 }
        ];
        this.legendSettings = { visible: false };
        this.title = 'Oil and other liquid imports in USA',
        this.subTitle = 'In the year 2014 - 2015',
        this.tilt = -45;
    }

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

Subtitle customization

The subtitle of the 3D Circular Chart can be customized using the subTitleStyle property.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CircularChart3DAllModule } from '@syncfusion/ej2-angular-charts'

import { Component, OnInit, ViewChild } from '@angular/core';
import { CircularChart3DComponent } from '@syncfusion/ej2-angular-charts';

@Component({
imports: [
         CircularChart3DAllModule
    ],

providers: [CircularChart3DAllModule],
standalone: true,
  selector: 'app-container',
  template: `
  <ejs-circularchart3d #chart style='display:block;' align='center' [title]='title' [subTitle]='subTitle' [subTitleStyle]='subTitleStyle' [tilt]='tilt' [legendSettings]="legendSettings">
    <e-circularchart3d-series-collection>
    <e-circularchart3d-series [dataSource]='dataSource' xName='x' yName='y' >
    </e-circularchart3d-series></e-circularchart3d-series-collection>
    </ejs-circularchart3d>`
})
export class AppComponent implements OnInit {
  public dataSource?: Object[];
  public legendSettings?: Object;
  public tilt?: number;
  public title?: string;
  public subTitle?: string;
  public subTitleStyle?: object;

  @ViewChild('chart')
  public chartObj?: CircularChart3DComponent;

  ngOnInit(): void {
    this.dataSource = [
      { x: 'Saudi Arabia', y: 58 },
      { x: 'Persian Gulf', y: 15 },
      { x: 'Canada', y: 13 },
      { x: 'Venezuela', y: 8 },
      { x: 'Mexico', y: 3 },
      { x: 'Russia', y: 2 },
      { x: 'Miscellaneous', y: 1 }
    ];
    this.legendSettings = { visible: false };
    this.title = 'Oil and other liquid imports in USA',
      this.subTitle = 'In the year 2014 - 2015',
      this.tilt = -45;
    this.subTitleStyle = {
      fontFamily: "Arial",
      fontStyle: 'italic',
      fontWeight: 'regular',
      color: "#E27F2D",
      size: '13px'
    };
  }

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