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,
You can select a point, by setting selectionMode
to point.
<ejs-chart id="container" title="Olympic Medals" selectionMode="Point">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
<e-series dataSource="ViewBag.dataSource" name="Silver" xName="country" width="2" opacity="1" yName="silver" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
<e-series dataSource="ViewBag.dataSource" name="bronze" xName="country" width="2" opacity="1" yName="bronze" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>
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;
}
You can select a series, by setting selectionMode
to series.
<ejs-chart id="container" title="Olympic Medals" selectionMode="Series">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
<e-series dataSource="ViewBag.dataSource" name="Silver" xName="country" width="2" opacity="1" yName="silver" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
<e-series dataSource="ViewBag.dataSource" name="bronze" xName="country" width="2" opacity="1" yName="bronze" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>
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;
}
You can select the points that corresponds to the same index in all the series, by setting selectionMode
to
cluster.
<ejs-chart id="container" title="Olympic Medals" selectionMode="Cluster">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
<e-series dataSource="ViewBag.dataSource" name="Silver" xName="country" width="2" opacity="1" yName="silver" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
<e-series dataSource="ViewBag.dataSource" name="bronze" xName="country" width="2" opacity="1" yName="bronze" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>
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;
}
DragXY, DragX and DragY
To fetch the collection of data under a particular region, you have to set selectionMode
as DragXY
.
The selected data’s are returned as an array collection in the dragComplete
event.
<ejs-chart id="container" title="Olympic Medals" selectionMode="DragXY">
<e-chart-primaryxaxis></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Product A" xName="xValue" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Scatter"></e-series>
</e-series-collection>
</ejs-chart>
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;
}
}
}
You can select multiple points or series, by enabling the isMultiSelect
property.
<ejs-chart id="container" title="Olympic Medals" selectionMode="Series" isMultiSelect="true">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
<e-series dataSource="ViewBag.dataSource" name="Silver" xName="country" width="2" opacity="1" yName="silver" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
<e-series dataSource="ViewBag.dataSource" name="bronze" xName="country" width="2" opacity="1" yName="bronze" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>
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;
}
You can able to select a point or series programmatically on a chart using
selectedDataIndexes
property.
<ejs-chart id="container" title="Olympic Medals" selectionMode="Point" isMultiSelect="true">
<e-chart-selecteddataindexes>
<e-chart-selecteddataindex series="0" point="1"></e-chart-selecteddataindex>
<e-chart-selecteddataindex series="1" point="3"></e-chart-selecteddataindex>
</e-chart-selecteddataindexes>
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" selectionStyle="chartSelection1"></e-series>
<e-series dataSource="ViewBag.dataSource" name="Silver" xName="country" width="2" opacity="1" yName="silver" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" selectionStyle="chartSelection2"></e-series>
<e-series dataSource="ViewBag.dataSource" name="bronze" xName="country" width="2" opacity="1" yName="bronze" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" selectionStyle="chartSelection3"></e-series>
</e-series-collection>
</ejs-chart>
<style>
.chartSelection1 {
fill: red
}
.chartSelection2 {
fill: green
}
.chartSelection3 {
fill: blue
}
</style>
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;
}
You can able to select a point or series through on legend using
toggleVisibility
property.
<ejs-chart id="container" title="Olympic Medals" selectionMode="Point">
<e-chart-legendsettings visible="true" toggleVisibility="false"></e-chart-legendsettings>
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" selectionStyle="chartSelection1"></e-series>
<e-series dataSource="ViewBag.dataSource" name="Silver" xName="country" width="2" opacity="1" yName="silver" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" selectionStyle="chartSelection2"></e-series>
<e-series dataSource="ViewBag.dataSource" name="bronze" xName="country" width="2" opacity="1" yName="bronze" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" selectionStyle="chartSelection3"></e-series>
</e-series-collection>
</ejs-chart>
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;
}
You can apply custom style to selected points or series with selectionStyle
property.
<ejs-chart id="container" title="Olympic Medals" selectionMode="Point" isMultiSelect="true">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="country" width="2" opacity="1" yName="gold" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" selectionStyle="chartSelection1"></e-series>
<e-series dataSource="ViewBag.dataSource" name="Silver" xName="country" width="2" opacity="1" yName="silver" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" selectionStyle="chartSelection2"></e-series>
<e-series dataSource="ViewBag.dataSource" name="bronze" xName="country" width="2" opacity="1" yName="bronze" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" selectionStyle="chartSelection3"></e-series>
</e-series-collection>
</ejs-chart>
<style>
.chartSelection1 {
fill: red
}
.chartSelection2 {
fill: green
}
.chartSelection3 {
fill: blue
}
</style>
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;
}