How to Dynamically Add Axes in ASP.NET Core Chart Component?

You can dynamically add axes to a EJ2 Chart in an ASP.NET Core application using the addAxes method at runtime. Below is a minimal, ready-to-use example that adds a new secondary Y-axis and binds a new series to it when a button is clicked.

Steps

• Render a Chart with at least two rows (so the new axis can be placed in a separate row).
• Add a button to trigger dynamic axis/series creation.
• In JavaScript, get the chart instance and call addAxes and addSeries.
• Refresh the chart.

Code Example

<button id="btn">Add axis</button>
<ejs-chart id="container" loaded="loaded" title="Inflation - Consumer Price">
   <e-chart-primaryxaxis valueType="DateTime"
                         labelFormat="y"
                         intervalType="Years"
                         edgeLabelPlacement="Shift">
       <e-majorgridlines width="0"></e-majorgridlines>
   </e-chart-primaryxaxis>
   <e-chart-primaryyaxis labelFormat="{value}%"
                         rangePadding="None"
                         minimum=0
                         maximum=100
                         interval=20>
       <e-linestyle width="0"></e-linestyle>
       <e-majorticklines width="0"></e-majorticklines>
   </e-chart-primaryyaxis>
   <e-series-collection>
       <e-series dataSource="ViewBag.dataSource" name="Germany" xName="xValue" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
           <e-series-marker visible="true" height="10" width="10"></e-series-marker>
       </e-series>
       <e-series dataSource="ViewBag.dataSource" name="England" xName="xValue" width="2" opacity="1" yName="yValue1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
           <e-series-marker visible="true" height="10" width="10"></e-series-marker>
       </e-series>
   </e-series-collection>
</ejs-chart>



<script>

   document.getElementById("btn").onclick = () => {
       var chart = document.getElementById('container').ej2_instances[0];
       chart.addAxes([{
        majorGridLines: { width: 0 },
        majorTickLines: { width: 0 },
        rowIndex: 1,
        lineStyle: { width: 0 },
        name: "yAxis3",
        minimum: 0,
        maximum: 100,
        visible: true
      }]);

      chart.addSeries([{
        yAxisName: "yAxis3"
      }]);
      chart.refresh();
   }

    function loaded(args) {
        chart = document.getElementById('container').ej2_instances[0];
    }
</script> 

Output

Initial rendering

Sample

Download Sample