We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Change Series Visibility With Checkbox

I'm using an EJS chart which has 8 different series. I have all but 1 of these visibility property set to false on load. In addition, I have 8 EJS checkboxes that correspond to each chart series. I would like to be able to toggle visibility client side when the corresponding checkbox is toggled. I am pasting an example of each control below. Can you help me understand how I should go about this?

series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("ChartTimeString")
   .YName("Prior7Days").DataSource(ViewBag.WaitingRoomPTDatasource).Name("Prior7Days").Visible(false).Add();

@Html.EJS().CheckBox("chkPrior7").Label("Prior 7 Days").Name("chkPrior7").CssClass("lbl").Checked(false).Render()

1 Reply

DD Dharanidharan Dharmasivam Syncfusion Team November 29, 2018 01:13 AM

Hi Lance, 
 
Greetings from Syncfusion. 
 
We have analyzed your query with the provided code snippet. We have prepared a sample in which we have eight check boxes for eight series. Using the change event of check box, we can toggle the visibility of the series. Find the code snippet below to achieve this requirement.  
 
[ChartFeatures.cshtml] 
 
@Html.EJS().CheckBox("chkPrior7").Checked(false).Change("Series1Visibility").Render() 
 
function Series1Visibility(args) { 
        var index = 0;  
        ChartRefresh(index, args.checked); 
    } 
 
function ChartRefresh(seriesIndex, seriesVisibility) {            
        Get instance of chart 
        var chartObj = document.getElementById('container').ej2_instances[0]; 
        Apply the series visibility based on check box and then refresh the chart 
        chartObj.series[0].visible = seriesVisibility; 
        chartObj.refresh(); 
    } 
 
 
This can be changed based on your scenario. 
Screenshot: 
 
 
 
Thanks, 
Dharani. 


Loader.
Live Chat Icon For mobile
Up arrow icon