Dialog chart in Angular Chart component

27 Sep 20236 minutes to read

Using the content property of the dialog component, you can show the chart in dialog pop-up.

To show the chart in dialog component, follow the given steps:

Step 1:

Initialize the dialog and button components, and then create a basic chart and set the visibility of dialog to false when initialize.

By setting the chart id in the content property of dialog component, you can show chart when clicking the button component.

app.component.ts

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

@Component({
    selector: 'app-container',
    template: `<div id="target">
  <ejs-chart align='center' id='chartcontainer' [title]='title' [primaryXAxis]='primaryXAxis'>
    <e-series-collection>
      <e-series [dataSource]='data' type='Column' xName='x' yName='y' name='Germany' width=2>
      </e-series>
    </e-series-collection>
  </ejs-chart>
</div>

<div id='defaultDialog'>
  <ejs-dialog #Dialog [showCloseIcon]='showCloseIcon' [target]='target' [width]='width' [height]='height'
    [visible]='visible' allowDragging=true header='chart 2'>
    <ng-template #content>
      <ejs-chart align='center' id='chartcontainer1' [title]='title' [primaryXAxis]='primaryXAxis' width='350' height='250'>
        <e-series-collection>
          <e-series [dataSource]='data1' type='Column' xName='x' yName='y' name='UK' width=2 fill="blue"> </e-series>
        </e-series-collection>
      </ejs-chart>
    </ng-template>
  </ejs-dialog>
</div>

<button class="e-control e-btn" id='dlgbtn' (click)="BtnClick($event)">Open Dialog</button>
`
})
export class AppComponent {

  public data: Object[] = [
    { x: new Date(2005, 0, 1), y: 21 }, { x: new Date(2006, 0, 1), y: 24 },
    { x: new Date(2007, 0, 1), y: 36 }, { x: new Date(2008, 0, 1), y: 38 },
    { x: new Date(2009, 0, 1), y: 54 }, { x: new Date(2010, 0, 1), y: 57 },
    { x: new Date(2011, 0, 1), y: 70 }
  ];
  public data1: Object[] = [
    { x: new Date(2005, 0, 1), y: 28 }, { x: new Date(2006, 0, 1), y: 44 },
    { x: new Date(2007, 0, 1), y: 48 }
  ];
  @ViewChild('Dialog')
  public Dialog?: DialogComponent;
  public visible: boolean = false;
  public showCloseIcon: Boolean = true;
  public width: string = '500px';
  public height: string = '450px';
  public target: Element = document.getElementById('target') as Element;
  public content: string = '<div id="container2"></div>';
  //Initializing Primary X Axis
  public primaryXAxis: Object = {
    valueType: 'DateTime',
    labelFormat: 'y',
    intervalType: 'Years',
    edgeLabelPlacement: 'Shift'
  };
  public title: string = 'Inflation - Consumer Price';
  public BtnClick = (event: any): void => {
    this.Dialog?.show();
  };
  constructor() {
   //code
  };
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-angular-charts';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService } from '@syncfusion/ej2-angular-grids';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
import { PieSeriesService, AccumulationTooltipService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
import {
    LineSeriesService, DateTimeService, DataLabelService, StackingColumnSeriesService, CategoryService,
    StepAreaSeriesService, SplineSeriesService, ScrollBarService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
    SelectionService, ScatterSeriesService, ZoomService, ColumnSeriesService, AreaSeriesService, RangeAreaSeriesService
} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, ChartAllModule, AccumulationChartAllModule, AccumulationChartModule, GridModule, DialogModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [LineSeriesService, DateTimeService, ColumnSeriesService, DataLabelService, ZoomService, StackingColumnSeriesService, CategoryService,
        StepAreaSeriesService, SplineSeriesService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
        PieSeriesService, AccumulationTooltipService, ScrollBarService, AccumulationDataLabelService, SelectionService, ScatterSeriesService,
        PageService, AreaSeriesService, RangeAreaSeriesService ]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);