Dynamic IntervalType and LabelFormat property changes from javascript

[No Consent]

ES v19.2.0.55

I'm seeking to have a user controlled interval for a given dataset that will not result in a second round trip to the server to filter.

Some documentation suggests that the following will work, however the result is null:

var chart = document.getElementById("#container").ej2_instances[0];

In the following, ejChart is not defined:

var chart = $("#container").ejChart("instance");

By what means are there to change the IntervalType property, and the LabelFormat property as necessary when using a chart created using the @Html.EJS().Chart( "container)... method, and then refresh the chart view?

Our current default view is:

.IntervalType( IntervalType.Years )
.LabelFormat( "y" )

Example onclick function call from a styled HREF element:

  function setChartIntervalMonths() {

            var chart = document.getElementById("#container").ej2_instances[0];

            chart.primaryXAxis.intervalType = 'Months';

            chart.forceRedraw();

        }

[Durga Gopalakrishnan]

Hi Consent, 

Greetings from Syncfusion. 

We have prepared sample to change the labelFormat for chart axis using chart refresh method. Please check with below snippet and sample. 

<script> 

    function changeData() { 

        var chart = document.getElementById('container').ej2_instances[0]; 

            chart.primaryXAxis.intervalType = "Months"; 

            chart.primaryXAxis.labelFormat = "MMM"; 

            chart.series[0].xName = "months"; 

            chart.refresh(); 

    } 

</script> 

 

Before Update 

 

After Update 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChangeFormat1861439811.zip 

Note : As per attached snippet, we have noted, you have been using both EJ1 and EJ2 chart together. Similar component from EJ1 and EJ2 platform cannot be used together. You need to choose the component in either EJ1 or EJ2 platform. 

Kindly revert us if you have any concerns. 

Regards, 

Durga G