To add chart dynamically

By using html button, you can add the chart dynamically by clicking the button.

To add the chart dynamically through button click, follow the given steps:

Step 1: Initially create the html button. Then create chart inside of button onClick function. Now, clicking the button charts will render based on click count.

CSHTML

<button id="add" onclick="addChart()">Add Chart</button>

<script>
    window.count = 0;

    function addChart() {
        //Create div element dynamically and append to DOM
        var chartEle = document.createElement('div');
        chartEle.id = 'chartContainer' + window.count;
        document.getElementsByTagName('body')[0].appendChild(chartEle);

        //Created chart here
        var chart = new ej.charts.Chart({
            series: [{
                type: 'Line', xName: 'x', width: 2, marker: { visible: true },
                yName: 'y', name: 'Germany',
                dataSource: [{ x: 1, y: 21 },{ x: 2, y: 24 },{ x: 3, y: 36 },
                        { x: 4, y: 38 },{ x: 5, y: 54 },{ x: 6, y: 57 },{ x: 7, y: 70 }],
                }],
            title: 'Inflation - Consumer Price', tooltip: { enable: true }, height:'400', width: '800'
        });
        chart.appendTo('#' + chartEle.id);
        window.count++;
    }
</script>

Dynamic-chart.cs

public IActionResult Index()
        {
            return View();
        }