Search results

Selection

Chart provides selection support for the series and its data points on mouse click.

When Mouse is clicked on the data points, the corresponding series legend will also be selected.

We have different type of selection mode for selecting the data. They are,

  • None
  • Point
  • Series
  • Cluster
  • DragXY
  • DragX
  • DragY

Point

You can select a point, by setting selectionMode to point.

razor
point-selection.cs
@using Syncfusion.EJ2;
@section ControlsSection{
            @(Html.EJS().Chart("container").Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue").DataSource(ViewBag.dataSource).Name("Age 0-14").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue1").DataSource(ViewBag.dataSource).Name("Age 15-64").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue2").DataSource(ViewBag.dataSource).Name("Age 65 & Above").Add();

       }).PrimaryXAxis(px => px.Title("Countries").Interval(1).
       LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate90).
       EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).
       ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
       PrimaryYAxis(py => py.LabelFormat("{value}%").
       Title("Distribution").
       Interval(20)).
       Title("Age Distribution by Country").
       SelectionMode(Syncfusion.EJ2.Charts.SelectionMode.Point).Render()     
    )
}
public IActionResult Column()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
                new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
                new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
                new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
                new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
                new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
                new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
                new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
            public double silver;
            public double bronze;
        }

Series

You can select a series, by setting selectionMode to series.

razor
series-selection.cs
@using Syncfusion.EJ2;
@section ControlsSection{
            @(Html.EJS().Chart("container").Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue").DataSource(ViewBag.dataSource).Name("Age 0-14").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue1").DataSource(ViewBag.dataSource).Name("Age 15-64").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue2").DataSource(ViewBag.dataSource).Name("Age 65 & Above").Add();

       }).PrimaryXAxis(px => px.Title("Countries").Interval(1).
       LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate90).
       EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).
       ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
       PrimaryYAxis(py => py.LabelFormat("{value}%").
       Title("Distribution").
       Interval(20)).
       Title("Age Distribution by Country").
       SelectionMode(Syncfusion.EJ2.Charts.SelectionMode.Series).Render()     
    )
}
public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
                new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
                new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
                new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
                new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
                new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
                new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
                new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
            public double silver;
            public double bronze;
        }

Cluster

You can select the points that corresponds to the same index in all the series, by setting selectionMode to cluster.

razor
cluster-selection.cs
@using Syncfusion.EJ2;
@section ControlsSection{
            @(Html.EJS().Chart("container").Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue").DataSource(ViewBag.dataSource).Name("Age 0-14").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue1").DataSource(ViewBag.dataSource).Name("Age 15-64").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue2").DataSource(ViewBag.dataSource).Name("Age 65 & Above").Add();

       }).PrimaryXAxis(px => px.Title("Countries").Interval(1).
       LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate90).
       EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).
       ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
       PrimaryYAxis(py => py.LabelFormat("{value}%").
       Title("Distribution").
       Interval(20)).
       Title("Age Distribution by Country").
       SelectionMode(Syncfusion.EJ2.Charts.SelectionMode.Cluster).Render()     
    )
}
public IActionResult Column()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
                new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
                new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
                new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
                new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
                new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
                new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
                new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
            public double silver;
            public double bronze;
        }

Rectangular selection

DragXY, DragX and DragY

To fetch the collection of data under a particular region, you have to set selectionMode as DragXY.

  • DragXY - Allows us to select data with respect to horizontal and vertical axis.
  • DragX - Allows us to select data with respect to horizontal axis.
  • DragY - Allows us to select data with respect to vertical axis.

The selected data’s are returned as an array collection in the dragComplete event.

razor
drag.cs
@using Syncfusion.EJ2;
@section ControlsSection{
      @Html.EJS().Chart("container").Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Scatter).XName("xValue").YName("yValue").DataSource(ViewBag.dataSource).Marker(ViewBag.marker).Name("Product A").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Scatter).XName("xValue").YName("yValue1").DataSource(ViewBag.dataSource).Marker(ViewBag.marker1).Name("Product B").Add();

       }).PrimaryXAxis(px => px.Title("Countries").Minimum(1970).Maximum(2016).MajorGridLines(ViewBag.majorGridLines)
       ).PrimaryYAxis(py => py.LabelFormat("{value}%").Title("Sale").Interval(25).Maximum(100).Minimum(0).MajorGridLines(ViewBag.majorGridLines)
       ).Title("Profit Comparision of A and B").ChartArea(area => area.Border(ViewBag.ChartBorder)).Load("load").SelectionMode(Syncfusion.EJ2.Charts.SelectionMode.DragXY).Render()
}
public ActionResult Index()
        {
            List<RangeSelectionChartData> chartData = new List<RangeSelectionChartData>
            {
                new RangeSelectionChartData { xValue = 1971, yValue = 50, yValue1 = 23 },
                new RangeSelectionChartData { xValue = 1972, yValue = 20, yValue1 = 67 },
                new RangeSelectionChartData { xValue = 1973, yValue = 63, yValue1 = 83 },
                new RangeSelectionChartData { xValue = 1974, yValue = 81, yValue1 = 43 },
                new RangeSelectionChartData { xValue = 1975, yValue = 64, yValue1 = 8  },
                new RangeSelectionChartData { xValue = 1976, yValue = 36, yValue1 = 41 },
                new RangeSelectionChartData { xValue = 1977, yValue = 22, yValue1 = 56 },
                new RangeSelectionChartData { xValue = 1978, yValue = 78, yValue1 = 31 },
                new RangeSelectionChartData { xValue = 1979, yValue = 60, yValue1 = 29 },
                new RangeSelectionChartData { xValue = 1980, yValue = 41, yValue1 = 87 },
                new RangeSelectionChartData { xValue = 1981, yValue = 62, yValue1 = 43 },
                new RangeSelectionChartData { xValue = 1982, yValue = 56, yValue1 = 12 },
                new RangeSelectionChartData { xValue = 1983, yValue = 96, yValue1 = 38 },
                new RangeSelectionChartData { xValue = 1984, yValue = 48, yValue1 = 67 },
                new RangeSelectionChartData { xValue = 1985, yValue = 23, yValue1 = 49 },
                new RangeSelectionChartData { xValue = 1986, yValue = 54, yValue1 = 67 },
                new RangeSelectionChartData { xValue = 1987, yValue = 73, yValue1 = 83 },
                new RangeSelectionChartData { xValue = 1988, yValue = 56, yValue1 = 16 },
                new RangeSelectionChartData { xValue = 1989, yValue = 67, yValue1 = 89 },
                new RangeSelectionChartData { xValue = 1990, yValue = 79, yValue1 = 18 },
                new RangeSelectionChartData { xValue = 1991, yValue = 18, yValue1 = 46 },
                new RangeSelectionChartData { xValue = 1992, yValue = 78, yValue1 = 39 },
                new RangeSelectionChartData { xValue = 1993, yValue = 92, yValue1 = 68 },
                new RangeSelectionChartData { xValue = 1994, yValue = 43, yValue1 = 87 },
                new RangeSelectionChartData { xValue = 1995, yValue = 29, yValue1 = 45 },
                new RangeSelectionChartData { xValue = 1996, yValue = 14, yValue1 = 42 },
                new RangeSelectionChartData { xValue = 1997, yValue = 85, yValue1 = 28 },
                new RangeSelectionChartData { xValue = 1998, yValue = 24, yValue1 = 82 },
                new RangeSelectionChartData { xValue = 1999, yValue = 61, yValue1 = 13 },
                new RangeSelectionChartData { xValue = 2000, yValue = 80, yValue1 = 83 },
                new RangeSelectionChartData { xValue = 2001, yValue = 14, yValue1 = 26 },
                new RangeSelectionChartData { xValue = 2002, yValue = 34, yValue1 = 57 },
                new RangeSelectionChartData { xValue = 2003, yValue = 81, yValue1 = 48 },
                new RangeSelectionChartData { xValue = 2004, yValue = 70, yValue1 = 84 },
                new RangeSelectionChartData { xValue = 2005, yValue = 21, yValue1 = 64 },
                new RangeSelectionChartData { xValue = 2006, yValue = 70, yValue1 = 24 },
                new RangeSelectionChartData { xValue = 2007, yValue = 32, yValue1 = 82 },
                new RangeSelectionChartData { xValue = 2008, yValue = 43, yValue1 = 37 },
                new RangeSelectionChartData { xValue = 2009, yValue = 21, yValue1 = 68 },
                new RangeSelectionChartData { xValue = 2010, yValue = 63, yValue1 = 37 },
                new RangeSelectionChartData { xValue = 2011, yValue = 9 , yValue1 = 35},
                new RangeSelectionChartData { xValue = 2012, yValue = 51, yValue1 = 81 },
                new RangeSelectionChartData { xValue = 2013, yValue = 25, yValue1 = 38 },
                new RangeSelectionChartData { xValue = 2014, yValue = 96, yValue1 = 51 },
                new RangeSelectionChartData { xValue = 2015, yValue = 32, yValue1 = 58 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class RangeSelectionChartData
        {
            public double xValue;
            public double yValue;
            public double yValue1;
        }
    }
}

Selection type

You can select multiple points or series, by enabling the isMultiSelect property.

razor
selection-type.cs
@using Syncfusion.EJ2;
@section ControlsSection{
            @(Html.EJS().Chart("container").Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue").DataSource(ViewBag.dataSource).Name("Age 0-14").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue1").DataSource(ViewBag.dataSource).Name("Age 15-64").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue2").DataSource(ViewBag.dataSource).Name("Age 65 & Above").Add();

       }).PrimaryXAxis(px => px.Title("Countries").Interval(1).
       LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate90).
       EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).
       ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
       PrimaryYAxis(py => py.LabelFormat("{value}%").
       Title("Distribution").
       Interval(20)).
       Title("Age Distribution by Country").
       SelectionMode(Syncfusion.EJ2.Charts.SelectionMode.Series).
       IsMultiSelect("true"),.Render()     
    )
}
public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
                new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
                new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
                new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
                new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
                new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
                new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
                new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
            public double silver;
            public double bronze;
        }

Selection on load

You can able to select a point or series programmatically on a chart using selectedDataIndexes property.

razor
onload.cs
@using Syncfusion.EJ2;
@section ControlsSection{
            @(Html.EJS().Chart("container").Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue").DataSource(ViewBag.dataSource).Name("Age 0-14").SelectionStyle("chartSelection1")Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue1").DataSource(ViewBag.dataSource).Name("Age 15-64").SelectionStyle("chartSelection2")Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue2").DataSource(ViewBag.dataSource).Name("Age 65 & Above").SelectionStyle("chartSelection3")Add();

       }).PrimaryXAxis(px => px.Title("Countries").Interval(1).
       LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate90).
       EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).
       ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
       PrimaryYAxis(py => py.LabelFormat("{value}%").
       Title("Distribution").
       Interval(20)).
       Title("Age Distribution by Country").
       SelectionMode(Syncfusion.EJ2.Charts.SelectionMode.Series).Render()     
    )
}
.chartSelection1 {
    fill: red
}

.chartSelection2 {
    
    fill: green 
    
}

.chartSelection3 {
    fill: blue
}
public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
                new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
                new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
                new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
                new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
                new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
                new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
                new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
            public double silver;
            public double bronze;
        }

Selection through on legend

You can able to select a point or series through on legend using toggleVisibility property.

razor
selection-legend.cs
@using Syncfusion.EJ2;
@section ControlsSection{
            @(Html.EJS().Chart("container").Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue").DataSource(ViewBag.dataSource).Name("Age 0-14").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue1").DataSource(ViewBag.dataSource).Name("Age 15-64").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue2").DataSource(ViewBag.dataSource).Name("Age 65 & Above").Add();

       }).PrimaryXAxis(px => px.Title("Countries").Interval(1).
       LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate90).
       EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).
       ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
       PrimaryYAxis(py => py.LabelFormat("{value}%").
       Title("Distribution").
       Interval(20)).
       Title("Age Distribution by Country").
       LegendSettings(leg => leg.Visible(true)
                        .ToggleVisibility(false)).
       SelectionMode(Syncfusion.EJ2.Charts.SelectionMode.Series).Render()     
    )
}
public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
                new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
                new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
                new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
                new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
                new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
                new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
                new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
            public double silver;
            public double bronze;
        }

Customization for selection

You can apply custom style to selected points or series with selectionStyle property.

razor
custom-selection.cs
@using Syncfusion.EJ2;
@section ControlsSection{
            @(Html.EJS().Chart("container").Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue").DataSource(ViewBag.dataSource).Name("Age 0-14").SelectionStyle("chartSelection1")Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue1").DataSource(ViewBag.dataSource).Name("Age 15-64").SelectionStyle("chartSelection2")Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("xValue").YName("yValue2").DataSource(ViewBag.dataSource).Name("Age 65 & Above").SelectionStyle("chartSelection3")Add();

       }).PrimaryXAxis(px => px.Title("Countries").Interval(1).
       LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate90).
       EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).
       ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
       PrimaryYAxis(py => py.LabelFormat("{value}%").
       Title("Distribution").
       Interval(20)).
       Title("Age Distribution by Country").
       SelectionMode(Syncfusion.EJ2.Charts.SelectionMode.Series).Render()     
    )
}
.chartSelection1 {
    fill: red
}

.chartSelection2 {
    
    fill: green 
    
}

.chartSelection3 {
    fill: blue
}
public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
                new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
                new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
                new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
                new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
                new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
                new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
                new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
            public double silver;
            public double bronze;
        }