Dialog chart in EJ2 TypeScript Chart control

8 May 20239 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.

import { Chart, ColumnSeries, DateTime, Legend, Tooltip, ILoadedEventArgs, ChartTheme, IMouseEventArgs } from '@syncfusion/ej2-charts';
import { Button } from '@syncfusion/ej2-buttons';
import { Dialog } from '@syncfusion/ej2-popups';
Chart.Inject(ColumnSeries, DateTime, Legend, Tooltip);

let dialogObj: Dialog = new Dialog({
        header: 'Chart 2',
        target: document.getElementById('target'),
        showCloseIcon: true,
        width: '500px',
        height: '450px',
        allowDragging: true,
        visible: false,
        content:'<div id="container2"></div>'
    });
    dialogObj.appendTo('#defaultDialog');

    let chart: Chart = new Chart({

        //Initializing Primary X Axis
        primaryXAxis: {
                valueType: 'DateTime',
                labelFormat: 'y',
                intervalType: 'Years',
                edgeLabelPlacement: 'Shift',
        },
                //Initializing Chart Series
        series: [
            {
                type: 'Column',
                dataSource: [
                    { 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 }
                ],
                xName: 'x', width: 2, marker: {
                    visible: true,
                    width: 10,
                    height: 10
                },
                yName: 'y', name: 'Germany',   animation: {enable: false},
            },
        ],
        //Initializing Chart title
        title: 'Inflation - Consumer Price',
    });
    chart.appendTo('#container');
    let chart2: Chart = new Chart({

        //Initializing Primary X Axis
        primaryXAxis: {
                valueType: 'DateTime',
                labelFormat: 'y',
                intervalType: 'Years',
                edgeLabelPlacement: 'Shift',
        },

        //Initializing Chart Series
        series: [
            {
                type: 'Column',
                dataSource: [
                    { x: new Date(2005, 0, 1), y: 21 }, { x: new Date(2006, 0, 1), y: 24 },
                    { x: new Date(2007, 0, 1), y: 36 }
                ],
                xName: 'x', width: 2, marker: {
                    visible: true,
                    width: 10,
                    height: 10
                },
                animation: {enable: false},
                yName: 'y', name: 'Germany', fill: 'blue'
            },
        ],
        width: '380',
        height:'300',
        //Initializing Chart title
        title: 'Inflation - Consumer Price',
    });
 chart2.appendTo('#container2');
 document.getElementById('targetButton').onclick = (): void => {
        dialogObj.show();
    };
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id="target">
            <div id="container" align="center"></div>
            </div>
    <div id="defaultDialog">
               <div id="container2" align="center"></div>
            </div>
    <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true">Open Dialog</button>
</body>

</html>