Essential JS 2 Chart supports 32 types of series.
Line
To render a line series, use series type as Line.
<ejs-chart id="container" title="Olympic Medals" width="60%">
<e-chart-primaryxaxis valueType="Category">
</e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<AxisLabelData> chartData = new List<AxisLabelData>
{
new AxisLabelData { x= "South Korea", y= 39.4 },
new AxisLabelData { x= "India", y= 61.3 },
new AxisLabelData { x= "Pakistan", y= 20.4 },
new AxisLabelData { x= "Germany", y= 65.1 },
new AxisLabelData { x= "Australia", y= 15.8 },
new AxisLabelData { x= "Italy", y= 29.2 },
new AxisLabelData { x= "United Kingdom", y= 44.6 },
new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
new AxisLabelData { x= "Russia", y= 40.8 },
new AxisLabelData { x= "Mexico", y= 31 },
new AxisLabelData { x= "Brazil", y= 75.9 },
new AxisLabelData { x= "China", y= 51.4 }
};
ViewBag.dataSource = chartData;
return View();
}
public class AxisLabelData
{
public string x;
public double y;
public double y1;
}Step Line
To render a step line series, use series type as StepLine.
<ejs-chart id="container" title="Olympic Medals" width="60%">
<e-chart-primaryxaxis valueType="Category">
</e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StepLine"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<AxisLabelData> chartData = new List<AxisLabelData>
{
new AxisLabelData { x= "South Korea", y= 39.4 },
new AxisLabelData { x= "India", y= 61.3 },
new AxisLabelData { x= "Pakistan", y= 20.4 },
new AxisLabelData { x= "Germany", y= 65.1 },
new AxisLabelData { x= "Australia", y= 15.8 },
new AxisLabelData { x= "Italy", y= 29.2 },
new AxisLabelData { x= "United Kingdom", y= 44.6 },
new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
new AxisLabelData { x= "Russia", y= 40.8 },
new AxisLabelData { x= "Mexico", y= 31 },
new AxisLabelData { x= "Brazil", y= 75.9 },
new AxisLabelData { x= "China", y= 51.4 }
};
ViewBag.dataSource = chartData;
return View();
}
public class AxisLabelData
{
public string x;
public double y;
public double y1;
}Spline
To render a spline series, use series type as Spline.
<ejs-chart id="container" title="Olympic Medals" width="60%">
<e-chart-primaryxaxis valueType="Category">
</e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Spline"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<AxisLabelData> chartData = new List<AxisLabelData>
{
new AxisLabelData { x= "South Korea", y= 39.4 },
new AxisLabelData { x= "India", y= 61.3 },
new AxisLabelData { x= "Pakistan", y= 20.4 },
new AxisLabelData { x= "Germany", y= 65.1 },
new AxisLabelData { x= "Australia", y= 15.8 },
new AxisLabelData { x= "Italy", y= 29.2 },
new AxisLabelData { x= "United Kingdom", y= 44.6 },
new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
new AxisLabelData { x= "Russia", y= 40.8 },
new AxisLabelData { x= "Mexico", y= 31 },
new AxisLabelData { x= "Brazil", y= 75.9 },
new AxisLabelData { x= "China", y= 51.4 }
};
ViewBag.dataSource = chartData;
return View();
}
public class AxisLabelData
{
public string x;
public double y;
public double y1;
}Spline Area
To render a spline series, use series type as Spline.
<ejs-chart id="container" title="Olympic Medals" width="60%">
<e-chart-primaryxaxis valueType="Category">
</e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.SplineArea"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<AxisLabelData> chartData = new List<AxisLabelData>
{
new AxisLabelData { x= "South Korea", y= 39.4 },
new AxisLabelData { x= "India", y= 61.3 },
new AxisLabelData { x= "Pakistan", y= 20.4 },
new AxisLabelData { x= "Germany", y= 65.1 },
new AxisLabelData { x= "Australia", y= 15.8 },
new AxisLabelData { x= "Italy", y= 29.2 },
new AxisLabelData { x= "United Kingdom", y= 44.6 },
new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
new AxisLabelData { x= "Russia", y= 40.8 },
new AxisLabelData { x= "Mexico", y= 31 },
new AxisLabelData { x= "Brazil", y= 75.9 },
new AxisLabelData { x= "China", y= 51.4 }
};
ViewBag.dataSource = chartData;
return View();
}
public class AxisLabelData
{
public string x;
public double y;
public double y1;
}Multicolored Line
To render a multicolored line series, use the series type as MultiColoredLine.
Here, the individual colors to the data can be mapped by using pointColorMapping.
<ejs-chart id="container" title="Olympic Medals" width="60%">
<e-chart-primaryxaxis valueType="Category">
</e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.MultiColoredLine"
pointColorMapping="color"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<AxisLabelData> chartData = new List<AxisLabelData>
{
new AxisLabelData { x= "South Korea", y= 39.4, color="red" },
new AxisLabelData { x= "India", y= 61.3, color="green" },
new AxisLabelData { x= "Pakistan", y= 20.4, color="#ff0097" },
new AxisLabelData { x= "Germany", y= 65.1, color="crimson" },
new AxisLabelData { x= "Australia", y= 15.8, color="blue" },
new AxisLabelData { x= "Italy", y= 29.2, color="darkorange" },
};
ViewBag.dataSource = chartData;
return View();
}
public class AxisLabelData
{
public string x;
public double y;
public string color;
}Customization of Line Charts
stroke, stroke-width and dashArray of all line type series can be customized by using fill,
width and dashArray properties.
<ejs-chart id="container" title="Olympic Medals" width="60%">
<e-chart-primaryxaxis valueType="Category">
</e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"
fill="red" width="4" dashArray="5,5"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<AxisLabelData> chartData = new List<AxisLabelData>
{
new AxisLabelData { x= "South Korea", y= 39.4, color="red" },
new AxisLabelData { x= "India", y= 61.3, color="green" },
new AxisLabelData { x= "Pakistan", y= 20.4, color="#ff0097" },
new AxisLabelData { x= "Germany", y= 65.1, color="crimson" },
new AxisLabelData { x= "Australia", y= 15.8, color="blue" },
new AxisLabelData { x= "Italy", y= 29.2, color="darkorange" },
};
ViewBag.dataSource = chartData;
return View();
}
public class AxisLabelData
{
public string x;
public double y;
public string color;
}Area
To render a area series, use series type as Area.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category">
</e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Area"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<AxisLabelData> chartData = new List<AxisLabelData>
{
new AxisLabelData { x= "South Korea", y= 39.4, color="red" },
new AxisLabelData { x= "India", y= 61.3, color="green" },
new AxisLabelData { x= "Pakistan", y= 20.4, color="#ff0097" },
new AxisLabelData { x= "Germany", y= 65.1, color="crimson" },
new AxisLabelData { x= "Australia", y= 15.8, color="blue" },
new AxisLabelData { x= "Italy", y= 29.2, color="darkorange" },
};
ViewBag.dataSource = chartData;
return View();
}
public class AxisLabelData
{
public string x;
public double y;
public string color;
}Range Area
To render a range area series, use series type
as RangeArea.
<ejs-chart id="container" width="60%" load="window.onload">
<e-chart-primaryxaxis valueType="DateTime">
</e-chart-primaryxaxis>
<e-series-collection>
<e-series xName="x" high="high" low="low" type="@Syncfusion.EJ2.Charts.ChartSeriesType.RangeArea"></e-series>
</e-series-collection>
</ejs-chart>
<script>
window.onload = function (args) {
var series = [];
var value = 70;
var point;
for (var i = 1; i < 70; i++) {
if (Math.random() > .5) {
value += Math.random();
}
else {
value -= Math.random();
}
point = { x: new Date(1930 + i, 5, i), high: value, low: value - 25 };
series.push(point);
}
args.chart.series[0].dataSource = series;
}
</script>public ActionResult Index()
{
return View();
}Stacked Area
To render a stacked area series, use series type as StackingArea.
<ejs-chart id="container" width="60%">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea">
</e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea">
</e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y2" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea">
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData{ x=2000, y= 0.61, y1= 0.03, y2= 0.48},
new PolarData{ x=2001, y= 0.81, y1= 0.05, y2= 0.53 },
new PolarData{ x=2002, y= 0.91, y1= 0.06, y2= 0.57 },
new PolarData{ x=2003, y= 1, y1= 0.09, y2= 0.61 },
new PolarData{ x=2004, y= 1.19, y1= 0.14, y2= 0.63 },
new PolarData{ x=2005, y= 1.47, y1= 0.20, y2= 0.64 },
new PolarData{ x=2006, y= 1.74, y1= 0.29, y2= 0.66 },
new PolarData{ x=2007, y= 1.98, y1= 0.46, y2= 0.76 },
new PolarData{ x=2008, y= 1.99, y1= 0.64, y2= 0.77 },
new PolarData{ x=2009, y= 1.70, y1= 0.75, y2= 0.55 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public double x;
public double y;
public double y1;
public double y2;
}100% Stacked Area
To render a 100% stacked area series, use series type as StackingArea100.
<ejs-chart id="container" width="60%">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea100">
</e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea100">
</e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y2" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea100">
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData{ x=2000, y= 0.61, y1= 0.03, y2= 0.48},
new PolarData{ x=2001, y= 0.81, y1= 0.05, y2= 0.53 },
new PolarData{ x=2002, y= 0.91, y1= 0.06, y2= 0.57 },
new PolarData{ x=2003, y= 1, y1= 0.09, y2= 0.61 },
new PolarData{ x=2004, y= 1.19, y1= 0.14, y2= 0.63 },
new PolarData{ x=2005, y= 1.47, y1= 0.20, y2= 0.64 },
new PolarData{ x=2006, y= 1.74, y1= 0.29, y2= 0.66 },
new PolarData{ x=2007, y= 1.98, y1= 0.46, y2= 0.76 },
new PolarData{ x=2008, y= 1.99, y1= 0.64, y2= 0.77 },
new PolarData{ x=2009, y= 1.70, y1= 0.75, y2= 0.55 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public double x;
public double y;
public double y1;
public double y2;
}Step Area
To render a step area series, use series type as StepArea.
<ejs-chart id="container" width="60%">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StepArea">
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<PolarData> chartData = new List<PolarData>
{
new PolarData{ x=2000, y= 0.61, y1= 0.03, y2= 0.48},
new PolarData{ x=2001, y= 0.81, y1= 0.05, y2= 0.53 },
new PolarData{ x=2002, y= 0.91, y1= 0.06, y2= 0.57 },
new PolarData{ x=2003, y= 1, y1= 0.09, y2= 0.61 },
new PolarData{ x=2004, y= 1.19, y1= 0.14, y2= 0.63 },
new PolarData{ x=2005, y= 1.47, y1= 0.20, y2= 0.64 },
new PolarData{ x=2006, y= 1.74, y1= 0.29, y2= 0.66 },
new PolarData{ x=2007, y= 1.98, y1= 0.46, y2= 0.76 },
new PolarData{ x=2008, y= 1.99, y1= 0.64, y2= 0.77 },
new PolarData{ x=2009, y= 1.70, y1= 0.75, y2= 0.55 }
};
ViewBag.dataSource = chartData;
return View();
}
public class PolarData
{
public double x;
public double y;
public double y1;
public double y2;
}Multicolored area
To render a multicolored area series, use the series type as MultiColoredArea.
The required segments of the series can be customized using the value, color, and dashArray.
<ejs-chart id="container" width="60%">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.MultiColoredArea">
<e-segments>
<e-segment value="2007" color="blue"></e-segment>
<e-segment value="2009" color="red"></e-segment>
<e-segment color="green"></e-segment>
</e-segments>
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData{ x= 2005, y= 28 },
new ChartData{ x= 2006, y= 25},
new ChartData{ x= 2007, y= 26 },
new ChartData{ x= 2008, y= 27 },
new ChartData{ x= 2009, y= 32},
new ChartData{ x= 2010, y= 35 },
new ChartData{ x= 2011, y= 25 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double x;
public double y;
}Customization of Area Charts
fill, width and dashArray properties can be customized by fill,
width and dashArray properties.
<ejs-chart id="container" width="60%">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Area"
fill="red" dashArray="5,5">
<e-series-border color="green" width="4"></e-series-border>
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData{ x= 2005, y= 28 },
new ChartData{ x= 2006, y= 25},
new ChartData{ x= 2007, y= 26 },
new ChartData{ x= 2008, y= 27 },
new ChartData{ x= 2009, y= 32},
new ChartData{ x= 2010, y= 35 },
new ChartData{ x= 2011, y= 25 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double x;
public double y;
}Column
To render a column series, use series type as Column.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
</e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<AxisLabelData> chartData = new List<AxisLabelData>
{
new AxisLabelData { x= "South Korea", y= 39.4 },
new AxisLabelData { x= "India", y= 61.3 },
new AxisLabelData { x= "Pakistan", y= 20.4 },
new AxisLabelData { x= "Germany", y= 65.1 },
new AxisLabelData { x= "Australia", y= 15.8 },
new AxisLabelData { x= "Italy", y= 29.2 },
new AxisLabelData { x= "United Kingdom", y= 44.6 },
new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
new AxisLabelData { x= "Russia", y= 40.8 },
new AxisLabelData { x= "Mexico", y= 31 },
new AxisLabelData { x= "Brazil", y= 75.9 },
new AxisLabelData { x= "China", y= 51.4 }
};
ViewBag.dataSource = chartData;
return View();
}
public class AxisLabelData
{
public string x;
public double y;
public double y1;
}Range Column
To render a range column series, use series type as RangeColumn.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" high="high" low="low" name="India" width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.RangeColumn"></e-series>
<e-series dataSource="ViewBag.dataSource1" xName="x" high="high" low="low" name="Germany" width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.RangeColumn"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<RangeColumnChartData> chartData = new List<RangeColumnChartData>
{
new RangeColumnChartData { x= "Sun", low= 3.1, high= 10.8 },
new RangeColumnChartData { x= "Mon", low= 5.7, high= 14.4 },
new RangeColumnChartData { x= "Tue", low= 8.4, high= 16.9 },
new RangeColumnChartData { x= "Wed", low= 10.6, high= 19.2 },
new RangeColumnChartData { x= "Thu", low= 8.5, high= 16.1 },
new RangeColumnChartData { x= "Fri", low= 6.0, high= 12.5 },
new RangeColumnChartData { x= "Sat", low= 1.5, high= 6.9 }
};
ViewBag.dataSource = chartData;
List<RangeColumnChartData> chartData1 = new List<RangeColumnChartData>
{
new RangeColumnChartData { x= "Sun", low= 2.5, high= 9.8 },
new RangeColumnChartData { x= "Mon", low= 4.7, high= 11.4 },
new RangeColumnChartData { x= "Tue", low= 6.4, high= 14.4 },
new RangeColumnChartData { x= "Wed", low= 9.6, high= 17.2 },
new RangeColumnChartData { x= "Thu", low= 7.5, high= 15.1 },
new RangeColumnChartData { x= "Fri", low= 3.0, high= 10.5 },
new RangeColumnChartData { x= "Sat", low= 1.2, high= 7.9 }
};
ViewBag.dataSource1 = chartData1;
return View();
}
public class RangeColumnChartData
{
public string x;
public double low;
public double high;
}Stacked Column
To render a stacked column series, use series type as StackingColumn.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn"></e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="Germany" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= "USA", yValue= 46, yValue1=56 },
new ChartData { x= "GBR", yValue= 27, yValue1=17 },
new ChartData { x= "CHN", yValue= 26, yValue1=36 },
new ChartData { x= "UK", yValue= 56, yValue1=16 },
new ChartData { x= "AUS", yValue= 12, yValue1=46 },
new ChartData { x= "IND", yValue= 26, yValue1=16 },
new ChartData { x= "DEN", yValue= 26, yValue1=12 },
new ChartData { x= "MEX", yValue= 34, yValue1=32},
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x;
public double yValue;
public double yValue1;
}100% Stacked Column
To render a 100% stacked column series, use series type as StackingColumn100.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100"></e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="Germany" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= "USA", yValue= 46, yValue1=56 },
new ChartData { x= "GBR", yValue= 27, yValue1=17 },
new ChartData { x= "CHN", yValue= 26, yValue1=36 },
new ChartData { x= "UK", yValue= 56, yValue1=16 },
new ChartData { x= "AUS", yValue= 12, yValue1=46 },
new ChartData { x= "IND", yValue= 26, yValue1=16 },
new ChartData { x= "DEN", yValue= 26, yValue1=12 },
new ChartData { x= "MEX", yValue= 34, yValue1=32},
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x;
public double yValue;
public double yValue1;
}Stacking Group
You can use the stackingGroup property to group the stacked columns and 100% stacked columns.
Columns with same group name are stacked on top of each other.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn"
stackingGroup="a"></e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="Germany" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn"
stackingGroup="b"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= "USA", yValue= 46, yValue1=56 },
new ChartData { x= "GBR", yValue= 27, yValue1=17 },
new ChartData { x= "CHN", yValue= 26, yValue1=36 },
new ChartData { x= "UK", yValue= 56, yValue1=16 },
new ChartData { x= "AUS", yValue= 12, yValue1=46 },
new ChartData { x= "IND", yValue= 26, yValue1=16 },
new ChartData { x= "DEN", yValue= 26, yValue1=12 },
new ChartData { x= "MEX", yValue= 34, yValue1=32},
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x;
public double yValue;
public double yValue1;
}Customization of Column Charts
fill and border of all column type series can be
customized using fill and border properties.
For customizing a specify point, please refer the
pointRender.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"
fill="skyblue" dashArray="5,3">
<e-series-border color="green" width="4"></e-series-border>
</e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= "USA", yValue= 46, yValue1=56 },
new ChartData { x= "GBR", yValue= 27, yValue1=17 },
new ChartData { x= "CHN", yValue= 26, yValue1=36 },
new ChartData { x= "UK", yValue= 56, yValue1=16 },
new ChartData { x= "AUS", yValue= 12, yValue1=46 },
new ChartData { x= "IND", yValue= 26, yValue1=16 },
new ChartData { x= "DEN", yValue= 26, yValue1=12 },
new ChartData { x= "MEX", yValue= 34, yValue1=32},
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x;
public double yValue;
public double yValue1;
}Bar
To render a bar series, use series type as Bar.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= "USA", yValue= 46, yValue1=56 },
new ChartData { x= "GBR", yValue= 27, yValue1=17 },
new ChartData { x= "CHN", yValue= 26, yValue1=36 },
new ChartData { x= "UK", yValue= 56, yValue1=16 },
new ChartData { x= "AUS", yValue= 12, yValue1=46 },
new ChartData { x= "IND", yValue= 26, yValue1=16 },
new ChartData { x= "DEN", yValue= 26, yValue1=12 },
new ChartData { x= "MEX", yValue= 34, yValue1=32},
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x;
public double yValue;
public double yValue1;
}Stacked bar
To render a stacked bar series, use series type as StackingBar.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"></e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= "USA", yValue= 46, yValue1=56 },
new ChartData { x= "GBR", yValue= 27, yValue1=17 },
new ChartData { x= "CHN", yValue= 26, yValue1=36 },
new ChartData { x= "UK", yValue= 56, yValue1=16 },
new ChartData { x= "AUS", yValue= 12, yValue1=46 },
new ChartData { x= "IND", yValue= 26, yValue1=16 },
new ChartData { x= "DEN", yValue= 26, yValue1=12 },
new ChartData { x= "MEX", yValue= 34, yValue1=32},
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x;
public double yValue;
public double yValue1;
}100% Stacked Bar
To render a 100% stacked bar series, use series type as StackingBar100.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100"></e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= "USA", yValue= 46, yValue1=56 },
new ChartData { x= "GBR", yValue= 27, yValue1=17 },
new ChartData { x= "CHN", yValue= 26, yValue1=36 },
new ChartData { x= "UK", yValue= 56, yValue1=16 },
new ChartData { x= "AUS", yValue= 12, yValue1=46 },
new ChartData { x= "IND", yValue= 26, yValue1=16 },
new ChartData { x= "DEN", yValue= 26, yValue1=12 },
new ChartData { x= "MEX", yValue= 34, yValue1=32},
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x;
public double yValue;
public double yValue1;
}Stacking Group
You can use the stackingGroup property to group the stacked
bar and 100% stacked bar. Columns with same group name are stacked on top of each other.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"
stackingGroup="a"></e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"
stackingGroup="b"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= "USA", yValue= 46, yValue1=56 },
new ChartData { x= "GBR", yValue= 27, yValue1=17 },
new ChartData { x= "CHN", yValue= 26, yValue1=36 },
new ChartData { x= "UK", yValue= 56, yValue1=16 },
new ChartData { x= "AUS", yValue= 12, yValue1=46 },
new ChartData { x= "IND", yValue= 26, yValue1=16 },
new ChartData { x= "DEN", yValue= 26, yValue1=12 },
new ChartData { x= "MEX", yValue= 34, yValue1=32},
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x;
public double yValue;
public double yValue1;
}Customization of Bar Charts
fill and border of all bar type series can be
customized using fill and border.
For customizing a specify point, please refer the pointRender.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar"
fill="skyblue" dashArray="5,5">
<e-series-border color="red" width="3"></e-series-border>
</e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= "USA", yValue= 46, yValue1=56 },
new ChartData { x= "GBR", yValue= 27, yValue1=17 },
new ChartData { x= "CHN", yValue= 26, yValue1=36 },
new ChartData { x= "UK", yValue= 56, yValue1=16 },
new ChartData { x= "AUS", yValue= 12, yValue1=46 },
new ChartData { x= "IND", yValue= 26, yValue1=16 },
new ChartData { x= "DEN", yValue= 26, yValue1=12 },
new ChartData { x= "MEX", yValue= 34, yValue1=32},
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x;
public double yValue;
public double yValue1;
}To render a scatter series, use series type as Scatter.
<ejs-chart id="container" width="60%" load="window.onload">
<e-series-collection>
<e-series xName="x" yName="y" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Scatter"></e-series>
<e-series xName="x" yName="y" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Scatter"></e-series>
</e-series-collection>
</ejs-chart>
</div>
<script>
window.onload = function (args) {
var series1 = [];
var series2 = [];
var point1;
var value = 80;
var value1 = 70;
var i;
for (i = 1; i < 50; i++) {
if (Math.random() > 0.5) {
value += Math.random();
}
else {
value -= Math.random();
}
value = value < 60 ? 60 : value > 90 ? 90 : value;
point1 = { x: 120 + (i / 2), y: value.toFixed(1) };
series1.push(point1);
}
for (i = 1; i < 50; i++) {
if (Math.random() > 0.5) {
value1 += Math.random();
}
else {
value1 -= Math.random();
}
value1 = value1 < 60 ? 60 : value1 > 90 ? 90 : value1;
point1 = { x: 120 + (i / 2), y: value1.toFixed(1) };
series2.push(point1);
}
args.chart.series[0].dataSource = series1;
args.chart.series[1].dataSource = series2;
}
</script>public IActionResult Index(){
return View();
}To render a bubble series, use series type as Bubble.
<ejs-chart id="container" width="60%" load="window.onload">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bubble"
size="size"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<BubbleChartData> chartData = new List<BubbleChartData>
{
new BubbleChartData { x= 92.2, y= 7.8, size= 1.347, text= "China" },
new BubbleChartData { x= 74, y= 6.5, size= 1.241, text= "India" },
new BubbleChartData { x= 90.4, y= 6.0, size= 0.238, text= "Indonesia" },
new BubbleChartData { x= 99.4, y= 2.2, size= 0.312, text= "US" },
new BubbleChartData { x= 88.6, y= 1.3, size= 0.197, text= "Brazil" },
new BubbleChartData { x= 99, y= 0.7, size= 0.0818, text= "Germany" },
new BubbleChartData { x= 72, y= 2.0, size= 0.0826, text= "Egypt" },
new BubbleChartData { x= 99.6, y= 3.4, size= 0.143, text= "Russia" },
new BubbleChartData { x= 99, y= 0.2, size= 0.128, text= "Japan" },
new BubbleChartData { x= 86.1, y= 4.0, size= 0.115, text= "Mexico" },
new BubbleChartData { x= 92.6, y= 6.6, size= 0.096, text= "Philippines" },
new BubbleChartData { x= 61.3, y= 1.45, size= 0.162, text= "Nigeria" },
new BubbleChartData { x= 82.2, y= 3.97, size= 0.7, text= "Hong Kong" },
new BubbleChartData { x= 79.2, y= 3.9, size= 0.162, text= "Netherland" },
new BubbleChartData { x= 72.5, y= 4.5, size= 0.7, text= "Jordan" },
new BubbleChartData { x= 81, y= 3.5, size= 0.21, text= "Australia" },
new BubbleChartData { x= 66.8, y= 3.9, size= 0.028, text= "Mongolia" },
new BubbleChartData { x= 78.4, y= 2.9, size= 0.231, text= "Taiwan" }
};
ViewBag.dataSource = chartData;
return View();
}
public class BubbleChartData
{
public double x;
public double y;
public double size;
public string text;
}Bubble Size Mapping
size property can be used to map the size value specified in data source.
<ejs-chart id="container" width="60%" load="window.onload">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bubble"
size="size"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<BubbleChartData> chartData = new List<BubbleChartData>
{
new BubbleChartData { x= 92.2, y= 7.8, size= 1.347, text= "China" },
new BubbleChartData { x= 74, y= 6.5, size= 1.241, text= "India" },
new BubbleChartData { x= 90.4, y= 6.0, size= 0.238, text= "Indonesia" },
new BubbleChartData { x= 99.4, y= 2.2, size= 0.312, text= "US" },
new BubbleChartData { x= 88.6, y= 1.3, size= 0.197, text= "Brazil" },
new BubbleChartData { x= 99, y= 0.7, size= 0.0818, text= "Germany" },
new BubbleChartData { x= 72, y= 2.0, size= 0.0826, text= "Egypt" },
new BubbleChartData { x= 99.6, y= 3.4, size= 0.143, text= "Russia" },
new BubbleChartData { x= 99, y= 0.2, size= 0.128, text= "Japan" },
new BubbleChartData { x= 86.1, y= 4.0, size= 0.115, text= "Mexico" },
new BubbleChartData { x= 92.6, y= 6.6, size= 0.096, text= "Philippines" },
new BubbleChartData { x= 61.3, y= 1.45, size= 0.162, text= "Nigeria" },
new BubbleChartData { x= 82.2, y= 3.97, size= 0.7, text= "Hong Kong" },
new BubbleChartData { x= 79.2, y= 3.9, size= 0.162, text= "Netherland" },
new BubbleChartData { x= 72.5, y= 4.5, size= 0.7, text= "Jordan" },
new BubbleChartData { x= 81, y= 3.5, size= 0.21, text= "Australia" },
new BubbleChartData { x= 66.8, y= 3.9, size= 0.028, text= "Mongolia" },
new BubbleChartData { x= 78.4, y= 2.9, size= 0.231, text= "Taiwan" }
};
ViewBag.dataSource = chartData;
return View();
}
public class BubbleChartData
{
public double x;
public double y;
public double size;
public string text;
}