Programmatically Changing Chart Types

[Fernando]

Dear Syncfusion Team,

I'm currently using Syncfusion's charting tools and I have question. Is there a straightforward way to programmatically switch a chart from a column chart type to a line chart type while retaining the same data and configuration?

These are the two graphs that I would like to transform into a single graph, being able to switch the type of graph using an external button.

Thank you for your assistance.
Fernando

<div id="div1" >
    <ejs-chart id="container" locale="pt" width="850" theme="Fabric" title=" Volume de Água - Diário" subTitle="(dispositivo: 0000A37A - porta: DI1)">
        <e-chart-subtitlestyle size="12px" textOverflow="@Syncfusion.EJ2.Charts.TextOverflow.None"
                               textAlignment="@Syncfusion.EJ2.Charts.Alignment.Center"></e-chart-subtitlestyle>
        <e-chart-primaryxaxis title="Tempo (dias)" valueType="Category" labelPlacement="OnTicks" interval="1">
        </e-chart-primaryxaxis>
        <e-chart-primaryyaxis title="Volume (m³)"></e-chart-primaryyaxis>
        <e-series-collection>
            <e-series fill='url(#gradient)' dataSource="ViewBag.dataSource" xName="x" yName="y"
                      type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
                <e-series-marker shape="Diamond" width="10" height="10">
                    <e-series-datalabel visible="true"></e-series-datalabel>
                </e-series-marker>
                <e-series-cornerradius topLeft=10 topRight=10> </e-series-cornerradius>
            </e-series>
        </e-series-collection>
    </ejs-chart>
</div>


<div id="div2" style="display: none;">
    <ejs-chart id="linecontainer" locale="pt" width="850" theme="Fabric" title=" Volume de Água - Diário" subTitle="(dispositivo: 0000A37A - porta: DI1)">
        <e-chart-subtitlestyle size="12px" textOverflow="@Syncfusion.EJ2.Charts.TextOverflow.None"
                               textAlignment="@Syncfusion.EJ2.Charts.Alignment.Center"></e-chart-subtitlestyle>
        <e-chart-primaryxaxis title="Tempo (dias)" valueType="Category" labelPlacement="OnTicks" interval="1">
        </e-chart-primaryxaxis>
        <e-chart-primaryyaxis title="Volume (m³)"></e-chart-primaryyaxis>
        <e-series-collection>
            <e-series fill='url(#gradient)' dataSource="ViewBag.dataSource" xName="x" yName="y"
                      type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
                <e-series-marker visible="true" height="7" width="7" shape="@Syncfusion.EJ2.Charts.ChartShape.Circle" isFilled="true">
                    <e-series-datalabel visible="true"></e-series-datalabel>
                </e-series-marker>
                <e-series-cornerradius topLeft=10 topRight=10> </e-series-cornerradius>
            </e-series>
        </e-series-collection>
    </ejs-chart>
</div>
 Copy

[Durga Gopalakrishnan]

Hi Fernando,

Greetings from Syncfusion.

Your requirement can be achieved by changing the chart series type and re-rendering the chart using refresh method. We have prepared sample with your attached code snippet. Please check with below snippet and sample.

<ejs-dropdownlist dataSource="@ViewBag.select" change="onChange"></ejs-dropdownlist>

<ejs-chart id="container"></ejs-chart>

<script>

    function onChange(args) {

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

        chart.series[0].type = this.value;

        chart.refresh();

    }

</script>

Column

Line

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

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Fernando]

Hi Durga,

It's worked perfectly!

I just need one more thing. Is it possible for the line to be visible only up to the point where there is data and remove the "0" labels at the end of the line for days that do not yet have data?

Thanks

Fernando

[Durga Gopalakrishnan]

Fernando,

We suggest to use the textRender event to customize the data labels based on your requirements. We have assigned an empty string to the argument "text" by checking the y value. We have attached a modified sample for your reference. Please refer to the snippet and screenshot below.

<ejs-chart textRender="onTextRender"></ejs-chart>

<script>

    function onTextRender(args){

       args.text = args.point.yValue ? args.text : "";

    }

</script>

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ZeroLabels-1959893106.zip

UG : https://ej2.syncfusion.com/aspnetcore/documentation/chart/data-labels#customizing-specific-point

Please let us know if you have any concerns.