Dialog chart in EJ2 JavaScript Chart control

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

index.html
<!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://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <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>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>