Chart Types
14 Mar 202224 minutes to read
Essential JS 2 Chart supports 32 types of series.
Line Charts
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;
}Stacked Line
To render a stacked line series, use series type as StackingLine.
<ejs-chart id="container" title="Family Expense for Month">
<e-chart-primaryxaxis valueType="Category" interval="1">
</e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="John" xName="x" width="2" yName="y" type="StackingLine" dashArray="5,1">
<e-series-marker visible="true"></e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" name="Peter" xName="x" width="2" yName="y1" type="StackingLine" dashArray="5,1">
<e-series-marker visible="true"></e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" name="Steve" xName="x" width="2" yName="y2" type="StackingLine" dashArray="5,1">
<e-series-marker visible="true"></e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" name="Charle" xName="x" width="2" yName="y3" type="StackingLine" dashArray="5,1">
<e-series-marker visible="true"></e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<StackedLineChartData> chartData = new List<StackedLineChartData>
{
new StackedLineChartData { x= "Food", y= 90, y1= 40, y2= 70, y3= 120 },
new StackedLineChartData { x= "Transport", y= 80, y1= 90, y2= 110, y3= 70 },
new StackedLineChartData { x= "Medical", y= 50, y1= 80, y2= 120, y3= 50 },
new StackedLineChartData { x= "Clothes", y= 70, y1= 30, y2= 60, y3= 180 },
new StackedLineChartData { x= "Personal Care", y= 30, y1= 80, y2= 80, y3= 30 },
new StackedLineChartData { x= "Books", y= 10, y1= 40, y2= 30, y3= 270 },
new StackedLineChartData { x= "Fitness", y= 100,y1= 30, y2= 70, y3= 40 },
new StackedLineChartData { x= "Electricity", y= 55, y1= 95, y2= 55, y3= 75 },
new StackedLineChartData { x= "Tax", y= 20, y1= 50, y2= 40, y3= 65 },
new StackedLineChartData { x= "Pet Care", y= 40, y1= 20, y2= 80, y3= 95 },
new StackedLineChartData { x= "Education", y= 45, y1= 15, y2= 45, y3= 195 },
new StackedLineChartData { x= "Entertainment", y= 75, y1= 45, y2= 65, y3= 115 }
};
ViewBag.dataSource = chartData;
return View();
}
public class StackedLineChartData
{
public string x;
public double y;
public double y1;
public double y2;
public double y3;
}100% Stacked Line
To render a 100% stacked line series, use series type as StackingLine100.
<ejs-chart id="container" title="Family Expense for Month">
<e-chart-primaryxaxis valueType="Category" interval="1">
</e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="John" xName="x" width="2" yName="y" type="StackingLine100" dashArray="5,1">
<e-series-marker visible="true"></e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" name="Peter" xName="x" width="2" yName="y1" type="StackingLine100" dashArray="5,1">
<e-series-marker visible="true"></e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" name="Steve" xName="x" width="2" yName="y2" type="StackingLine100" dashArray="5,1">
<e-series-marker visible="true"></e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" name="Charle" xName="x" width="2" yName="y3" type="StackingLine100" dashArray="5,1">
<e-series-marker visible="true"></e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<StackedLineChartData100> chartData = new List<StackedLineChartData100>
{
new StackedLineChartData100 { x= "Food", y= 90, y1= 40, y2= 70, y3= 120 },
new StackedLineChartData100 { x= "Transport", y= 80, y1= 90, y2= 110, y3= 70 },
new StackedLineChartData100 { x= "Medical", y= 50, y1= 80, y2= 120, y3= 50 },
new StackedLineChartData100 { x= "Clothes", y= 70, y1= 30, y2= 60, y3= 180 },
new StackedLineChartData100 { x= "Personal Care", y= 30, y1= 80, y2= 80, y3= 30 },
new StackedLineChartData100 { x= "Books", y= 10, y1= 40, y2= 30, y3= 270 },
new StackedLineChartData100 { x= "Fitness", y= 100,y1= 30, y2= 70, y3= 40 },
new StackedLineChartData100 { x= "Electricity", y= 55, y1= 95, y2= 55, y3= 75 },
new StackedLineChartData100 { x= "Tax", y= 20, y1= 50, y2= 40, y3= 65 },
new StackedLineChartData100 { x= "Pet Care", y= 40, y1= 20, y2= 80, y3= 95 },
new StackedLineChartData100 { x= "Education", y= 45, y1= 15, y2= 45, y3= 195 },
new StackedLineChartData100 { x= "Entertainment", y= 75, y1= 45, y2= 65, y3= 115 }
};
ViewBag.dataSource = chartData;
return View();
}
public class StackedLineChartData100
{
public string x;
public double y;
public double y1;
public double y2;
public double y3;
}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
The 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 Charts
Area
To render an 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();
}Spline Range Area
The Spline Range Area Chart is used to display continuous data points as a set of splines that vary between high and low values over intervals of time and across different categories.
To render a spline range area series, use series type as SplineRangeArea.
<ejs-chart id="container">
<e-chart-primaryxaxis valueType="Category" edgeLabelPlacement="Shift">
<e-majorgridlines width="0"></e-majorgridlines>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis labelFormat="{value}ËšC" minimum="0" maximum="40">
<e-linestyle width="0"></e-linestyle>
<e-majorticklines width="0"></e-majorticklines>
</e-chart-primaryyaxis>
<e-series-collection>
<e-series name="England" xName="x" high="high" low="low" dataSource="ViewBag.dataSource"
opacity="0.4" type="@Syncfusion.EJ2.Charts.ChartSeriesType.SplineRangeArea">
</e-series>
<e-series name="India" xName="x" high="high1" low="low1" dataSource="ViewBag.dataSource"
opacity="0.4" type="@Syncfusion.EJ2.Charts.ChartSeriesType.SplineRangeArea">
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index () {
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x = "Jan", high = 14, low = 4, high1 = 29, low1 = 19 },
new ChartData { x = "Feb", high = 17, low = 7, high1 = 32, low1 = 22 },
new ChartData { x = "Mar", high = 20, low = 10, high1 = 35, low1 = 25 },
new ChartData { x = "Apr", high = 22, low = 12, high1 = 37, low1 = 27 },
new ChartData { x = "May", high = 20, low = 10, high1 = 35, low1 = 25 },
new ChartData { x = "Jun", high = 17, low = 7, high1 = 32, low1 = 22 },
new ChartData { x = "Jul", high = 15, low = 5, high1 = 30, low1 = 20 },
new ChartData { x = "Aug", high = 17, low = 7, high1 = 32, low1 = 22 },
new ChartData { x = "Sep", high = 20, low = 10, high1 = 35, low1 = 25 },
new ChartData { x = "Oct", high = 22, low = 12, high1 = 37, low1 = 27 },
new ChartData { x = "Nov", high = 20, low = 10, high1 = 35, low1 = 25 },
new ChartData { x = "Dec", high = 17, low = 7, high1 = 32, low1 = 22 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string x;
public double high;
public double low;
public double high1;
public double low1;
}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;
}Stacked Step Area
To render a stacked step area series, use series type as StackingStepArea.
<ejs-chart id="container" width="60%">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingStepArea">
</e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingStepArea">
</e-series>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y2" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingStepArea">
</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
The 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 Charts
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;
}Grouped Column
You can use the groupName property to group the data points in the column type charts. Data points with same group name are grouped together.
<ejs-chart id="container" title="Olympics Medal Tally">
<e-chart-tooltipsettings enable="true">
</e-chart-tooltipsettings>
<e-chart-primaryxaxis valueType="Category" interval=1>
<e-majorgridlines width="0"></e-majorgridlines>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis>
<e-majorgridlines width="0"></e-majorgridlines>
<e-majorticklines width="0"></e-majorticklines>
<e-linestyle width="0"></e-linestyle>
<e-labelstyle color="transparent"></e-labelstyle>
</e-chart-primaryyaxis>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName='Year' yName='USA_Total' name='USA Total' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"
groupName="USA" columnWidth=0.7 columnSpacing=0.1>
<e-series-marker>
<e-series-datalabel visible="true" position="Top">
<e-font color="#ffffff" fontWeight="600"></e-font>
</e-series-datalabel>
</e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" xName='Year' yName='USA_Gold' name='USA Gold' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"
groupName="USA" columnWidth=0.5 columnSpacing=0.1>
<e-series-marker>
<e-series-datalabel visible="true" position="Top">
<e-font fontWeight="600" color="#ffffff"></e-font>
</e-series-datalabel>
</e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" xName='Year' yName='UK_Total' name='UK Total' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"
groupName="UK" columnWidth=0.7 columnSpacing=0.1>
<e-series-marker>
<e-series-datalabel visible="true" position="Top">
<e-font color="#ffffff" fontWeight="600"></e-font>
</e-series-datalabel>
</e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" xName='Year' yName='UK_Gold' name='UK Gold' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"
groupName="UK" columnWidth=0.5 columnSpacing=0.1>
<e-series-marker>
<e-series-datalabel visible="true" position="Top">
<e-font fontWeight="600" color="#ffffff"></e-font>
</e-series-datalabel>
</e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" xName='Year' yName='China_Total' name='China Total' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"
groupName="China" columnWidth=0.7 columnSpacing=0.1>
<e-series-marker>
<e-series-datalabel visible="true" position="Top">
<e-font color="#ffffff" fontWeight="600"></e-font>
</e-series-datalabel>
</e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" xName='Year' yName='China_Gold' name='China Gold' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"
groupName="China" columnWidth=0.5 columnSpacing=0.1>
<e-series-marker>
<e-series-datalabel visible="true" position="Top">
<e-font fontWeight="600" color="#ffffff"></e-font>
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<ColumnData> chartData = new List<ColumnData>
{
new ColumnData { Year = "2012", USA_Total = 104, USA_Gold = 46, UK_Total = 65, UK_Gold = 29, China_Total = 91, China_Gold = 38},
new ColumnData { Year = "2016", USA_Total = 121, USA_Gold = 46, UK_Total = 67, UK_Gold = 27, China_Total = 70, China_Gold = 26},
new ColumnData { Year = "2020", USA_Total = 113, USA_Gold = 39, UK_Total = 65, UK_Gold = 22, China_Total = 88, China_Gold = 38},
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnData
{
public string Year;
public double USA_Total;
public double USA_Gold;
public double UK_Total;
public double UK_Gold;
public double China_Total;
public double China_Gold;
}Customization of Column Charts
The fill and border of all column type series can be customized using fill and border properties. Width of the column and space between each column can be customized using columnWidth and columnSpacing properties respectively. The columnWidthInPixel property allows to specify the column width in pixel unit. 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" columnSpacing="0.5" columnWidth="0.5" 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 Charts
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;
}Grouped Bar
You can use the groupName property to group the data points in the bar type charts. Data points with same group name are grouped together.
<ejs-chart id="container" title="Olympics Medal Tally">
<e-chart-tooltipsettings enable="true">
</e-chart-tooltipsettings>
<e-chart-primaryxaxis valueType="Category" interval=1>
<e-majorgridlines width="0"></e-majorgridlines>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis>
<e-majorgridlines width="0"></e-majorgridlines>
<e-majorticklines width="0"></e-majorticklines>
<e-linestyle width="0"></e-linestyle>
<e-labelstyle color="transparent"></e-labelstyle>
</e-chart-primaryyaxis>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName='Year' yName='USA_Total' name='USA Total' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar"
groupName="USA" columnWidth=0.7 columnSpacing=0.1>
<e-series-marker>
<e-series-datalabel visible="true" position="Top">
<e-font color="#ffffff" fontWeight="600"></e-font>
</e-series-datalabel>
</e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" xName='Year' yName='USA_Gold' name='USA Gold' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar"
groupName="USA" columnWidth=0.5 columnSpacing=0.1>
<e-series-marker>
<e-series-datalabel visible="true" position="Top">
<e-font fontWeight="600" color="#ffffff"></e-font>
</e-series-datalabel>
</e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" xName='Year' yName='UK_Total' name='UK Total' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar"
groupName="UK" columnWidth=0.7 columnSpacing=0.1>
<e-series-marker>
<e-series-datalabel visible="true" position="Top">
<e-font color="#ffffff" fontWeight="600"></e-font>
</e-series-datalabel>
</e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" xName='Year' yName='UK_Gold' name='UK Gold' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar"
groupName="UK" columnWidth=0.5 columnSpacing=0.1>
<e-series-marker>
<e-series-datalabel visible="true" position="Top">
<e-font fontWeight="600" color="#ffffff"></e-font>
</e-series-datalabel>
</e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" xName='Year' yName='China_Total' name='China Total' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar"
groupName="China" columnWidth=0.7 columnSpacing=0.1>
<e-series-marker>
<e-series-datalabel visible="true" position="Top">
<e-font color="#ffffff" fontWeight="600"></e-font>
</e-series-datalabel>
</e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" xName='Year' yName='China_Gold' name='China Gold' width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar"
groupName="China" columnWidth=0.5 columnSpacing=0.1>
<e-series-marker>
<e-series-datalabel visible="true" position="Top">
<e-font fontWeight="600" color="#ffffff"></e-font>
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<ColumnData> chartData = new List<ColumnData>
{
new ColumnData { Year = "2012", USA_Total = 104, USA_Gold = 46, UK_Total = 65, UK_Gold = 29, China_Total = 91, China_Gold = 38},
new ColumnData { Year = "2016", USA_Total = 121, USA_Gold = 46, UK_Total = 67, UK_Gold = 27, China_Total = 70, China_Gold = 26},
new ColumnData { Year = "2020", USA_Total = 113, USA_Gold = 39, UK_Total = 65, UK_Gold = 22, China_Total = 88, China_Gold = 38},
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnData
{
public string Year;
public double USA_Total;
public double USA_Gold;
public double UK_Total;
public double UK_Gold;
public double China_Total;
public double China_Gold;
}Customization of Bar Charts
The fill and border of all bar type series can be customized using fill and border. Width of the bar and space between each bar can be customized using columnWidth and columnSpacing properties respectively. The columnWidthInPixel property allows to specify the bar width in pixel unit. 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" columnSpacing="0.5" columnWidth="0.5" 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;
}Scatter Charts
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();
}Bubble Chart
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
The 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;
}