To render a box and whisker chart, use seriestype
as BoxAndWhisker
.
The field y requires n number of data or it should contains minimum of five values to plot a segment.
@(Html.EJS().Chart("container").Series(
series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.BoxAndWhisker).
Name("Department").
DataSource(ViewBag.dataSource).
XName("xValue").
YName("yValue").
Marker(ViewBag.marker).Add();
}).PrimaryXAxis(
xAxis =>
xAxis.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
.LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Trim)
.EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
.MajorGridLines(ViewBag.gridlines)
).PrimaryYAxis(
yAxis =>
yAxis.Minimum(10).
Maximum(60).
Interval(10).
Title("Age").
MajorGridLines(ViewBag.gridlines).
MajorTickLines(ViewBag.ticklines)
).Title("Employee Age Group in Various Department").LegendSettings(
legend => {
legend.Visible(false);
}).Tooltip(
tooltip =>
{
tooltip.Enable(true);
}).ChartArea(area => area.Border(ViewBag.ChartBorder)).Render()
)
public ActionResult Index()
{
Double[] y1 = { 22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38 };
Double[] y2 = { 22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50 };
Double[] y3 = { 22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56 };
Double[] y4 = { 26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45 };
Double[] y5 = { 26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58 };
Double[] y6 = { 27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53 };
Double[] y7 = { 21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38 };
Double[] y8 = { 26, 28, 29, 30, 32, 33, 35, 36, 52 };
Double[] y9 = { 28, 29, 30, 31, 32, 34, 35, 36 };
List<BoxAndWhiskerChartData> chartData = new List<BoxAndWhiskerChartData>
{
new BoxAndWhiskerChartData { xValue = "Development", yValue = y1 },
new BoxAndWhiskerChartData { xValue = "Testing", yValue = y2},
new BoxAndWhiskerChartData { xValue = "HR", yValue = y3 },
new BoxAndWhiskerChartData { xValue = "Finance", yValue = y4 },
new BoxAndWhiskerChartData { xValue = "R&D", yValue = y5 },
new BoxAndWhiskerChartData { xValue = "Sales", yValue = y6 },
new BoxAndWhiskerChartData { xValue = "Inventory", yValue = y7 },
new BoxAndWhiskerChartData { xValue = "Graphics", yValue = y8 },
new BoxAndWhiskerChartData { xValue = "Training", yValue = y9 },
};
ViewBag.dataSource = chartData;
return View();
}
public class BoxAndWhiskerChartData
{
public string xValue;
public double[] yValue;
}
You can change the rendering mode of the Box and Whisker series using the boxPlotMode
property.
The default boxPlotMode is exclusive
.The other boxPlotMode available are inclusive
and normal
.
To render a box and whisker chart, use seriestype
as BoxAndWhisker
.
The field y requires n number of data or it should contains minimum of five values to plot a segment.
@(Html.EJS().Chart("container").Series(
series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.BoxAndWhisker).
Name("Department").
BoxPlotMode("Normal").
DataSource(ViewBag.dataSource).
XName("xValue").
YName("yValue").
Marker(ViewBag.marker).Add();
}).PrimaryXAxis(
xAxis =>
xAxis.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
.LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Trim)
.EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
.MajorGridLines(ViewBag.gridlines)
).PrimaryYAxis(
yAxis =>
yAxis.Minimum(10).
Maximum(60).
Interval(10).
Title("Age").
MajorGridLines(ViewBag.gridlines).
MajorTickLines(ViewBag.ticklines)
).Title("Employee Age Group in Various Department").LegendSettings(
legend => {
legend.Visible(false);
}).Tooltip(
tooltip =>
{
tooltip.Enable(true);
}).ChartArea(area => area.Border(ViewBag.ChartBorder)).Render()
)
public ActionResult Index()
{
Double[] y1 = { 22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38 };
Double[] y2 = { 22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50 };
Double[] y3 = { 22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56 };
Double[] y4 = { 26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45 };
Double[] y5 = { 26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58 };
Double[] y6 = { 27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53 };
Double[] y7 = { 21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38 };
Double[] y8 = { 26, 28, 29, 30, 32, 33, 35, 36, 52 };
Double[] y9 = { 28, 29, 30, 31, 32, 34, 35, 36 };
List<BoxAndWhiskerChartData> chartData = new List<BoxAndWhiskerChartData>
{
new BoxAndWhiskerChartData { xValue = "Development", yValue = y1 },
new BoxAndWhiskerChartData { xValue = "Testing", yValue = y2},
new BoxAndWhiskerChartData { xValue = "HR", yValue = y3 },
new BoxAndWhiskerChartData { xValue = "Finance", yValue = y4 },
new BoxAndWhiskerChartData { xValue = "R&D", yValue = y5 },
new BoxAndWhiskerChartData { xValue = "Sales", yValue = y6 },
new BoxAndWhiskerChartData { xValue = "Inventory", yValue = y7 },
new BoxAndWhiskerChartData { xValue = "Graphics", yValue = y8 },
new BoxAndWhiskerChartData { xValue = "Training", yValue = y9 },
};
ViewBag.dataSource = chartData;
return View();
}
public class BoxAndWhiskerChartData
{
public string xValue;
public double[] yValue;
}
In Box and Whisker series showMean
property is used to show the box and whisker average value. The default value of showMean
is false.
@(Html.EJS().Chart("container").Series(
series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.BoxAndWhisker).
Name("Department").
BoxPlotMode("Normal").
ShowMean("false").
DataSource(ViewBag.dataSource).
XName("xValue").
YName("yValue").
Marker(ViewBag.marker).Add();
}).PrimaryXAxis(
xAxis =>
xAxis.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
.LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Trim)
.EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
.MajorGridLines(ViewBag.gridlines)
).PrimaryYAxis(
yAxis =>
yAxis.Minimum(10).
Maximum(60).
Interval(10).
Title("Age").
MajorGridLines(ViewBag.gridlines).
MajorTickLines(ViewBag.ticklines)
).Title("Employee Age Group in Various Department").LegendSettings(
legend => {
legend.Visible(false);
}).Tooltip(
tooltip =>
{
tooltip.Enable(true);
}).ChartArea(area => area.Border(ViewBag.ChartBorder)).Render()
)
public ActionResult Index()
{
Double[] y1 = { 22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38 };
Double[] y2 = { 22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50 };
Double[] y3 = { 22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56 };
Double[] y4 = { 26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45 };
Double[] y5 = { 26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58 };
Double[] y6 = { 27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53 };
Double[] y7 = { 21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38 };
Double[] y8 = { 26, 28, 29, 30, 32, 33, 35, 36, 52 };
Double[] y9 = { 28, 29, 30, 31, 32, 34, 35, 36 };
List<BoxAndWhiskerChartData> chartData = new List<BoxAndWhiskerChartData>
{
new BoxAndWhiskerChartData { xValue = "Development", yValue = y1 },
new BoxAndWhiskerChartData { xValue = "Testing", yValue = y2},
new BoxAndWhiskerChartData { xValue = "HR", yValue = y3 },
new BoxAndWhiskerChartData { xValue = "Finance", yValue = y4 },
new BoxAndWhiskerChartData { xValue = "R&D", yValue = y5 },
new BoxAndWhiskerChartData { xValue = "Sales", yValue = y6 },
new BoxAndWhiskerChartData { xValue = "Inventory", yValue = y7 },
new BoxAndWhiskerChartData { xValue = "Graphics", yValue = y8 },
new BoxAndWhiskerChartData { xValue = "Training", yValue = y9 },
};
ViewBag.dataSource = chartData;
return View();
}
public class BoxAndWhiskerChartData
{
public string xValue;
public double[] yValue;
}
Waterfall chart helps to understand the cumulative effect of the sequentially introduced positive
and negative values. To render a Waterfall series, use series type
as
Waterfall
. intermediateSumIndexes
property of waterfall is used to represent the in between the sum values and
sumIndexes
is used to represent the cumulative sum values.
@Html.EJS().Chart("container").Series(series =>
{
series.Width(2).XName("xValue").YName("yValue").IntermediateSumIndexes(ViewBag.intermediateSumIndexes).SumIndexes(ViewBag.sumIndexes).Marker(ViewBag.marker).Name("USA").ColumnWidth(0.9).Type(Syncfusion.EJ2.Charts.ChartSeriesType.Waterfall).DataSource(ViewBag.dataSource).Add();
}
).ChartArea(area => area.Border(ViewBag.ChartBorder)).PrimaryXAxis(py => py.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(ViewBag.majorGridLines).PlotOffset(20)).PrimaryYAxis(py => py.Minimum(0).Maximum(5000).Interval(1000).MajorGridLines(ViewBag.majorGridLines).Title("Expenditure")).Title("Company Revenue and Profit").LegendSettings(lg => lg.Visible(true)).Tooltip(tl => tl.Enable(true)).Load("load").TextRender("textRender").AxisLabelRender("axisLabelRender").Render()
public ActionResult Index()
{
List<WaterfallChartData> chartData = new List<WaterfallChartData>
{
new WaterfallChartData { xValue = "Income", yValue = 4711 },
new WaterfallChartData { xValue = "Sales", yValue = -1015 },
new WaterfallChartData { xValue = "Development", yValue = -688 },
new WaterfallChartData { xValue = "Revenue", yValue = 1030 },
new WaterfallChartData { xValue = "Balance" },
new WaterfallChartData { xValue = "Expense", yValue = -361 },
new WaterfallChartData { xValue = "Tax", yValue = -695 },
new WaterfallChartData { xValue = "Net Profit" },
};
ViewBag.dataSource = chartData;
return View();
}
public class WaterfallChartData
{
public string xValue;
public double yValue;
}
Customization of Waterfall Series
The negative changes of waterfall charts is
represented by using negativeFillColor
and the summary changes are represented by using summaryFillColor
properties.
By default, the negativeFillColor as ‘#E94649’ and the summaryFillColor as ‘#4E81BC’.
@Html.EJS().Chart("container").Series(series =>
{
series.Width(2).XName("xValue").YName("yValue").IntermediateSumIndexes(ViewBag.intermediateSumIndexes).SumIndexes(ViewBag.sumIndexes).Marker(ViewBag.marker).NegativeFillColor("#e56590").Name("USA").ColumnWidth(0.9).Type(Syncfusion.EJ2.Charts.ChartSeriesType.Waterfall).DataSource(ViewBag.dataSource).Add();
}
).ChartArea(area => area.Border(ViewBag.ChartBorder)).PrimaryXAxis(py => py.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(ViewBag.majorGridLines).PlotOffset(20)).PrimaryYAxis(py => py.Minimum(0).Maximum(5000).Interval(1000).MajorGridLines(ViewBag.majorGridLines).Title("Expenditure")).Title("Company Revenue and Profit").LegendSettings(lg => lg.Visible(true)).Tooltip(tl => tl.Enable(true)).Load("load").TextRender("textRender").AxisLabelRender("axisLabelRender").Render()
public ActionResult Index()
{
List<WaterfallChartData> chartData = new List<WaterfallChartData>
{
new WaterfallChartData { xValue = "Income", yValue = 4711 },
new WaterfallChartData { xValue = "Sales", yValue = -1015 },
new WaterfallChartData { xValue = "Development", yValue = -688 },
new WaterfallChartData { xValue = "Revenue", yValue = 1030 },
new WaterfallChartData { xValue = "Balance" },
new WaterfallChartData { xValue = "Expense", yValue = -361 },
new WaterfallChartData { xValue = "Tax", yValue = -695 },
new WaterfallChartData { xValue = "Net Profit" },
};
ViewBag.dataSource = chartData;
return View();
}
public class WaterfallChartData
{
public string xValue;
public double yValue;
}
Error bars are graphical representations of the variability of data and used on graphs to indicate the error or uncertainty in a reported
measurement. To render the error bar for the series, set visible
as true
in error bar object.
@(Html.EJS().Chart("container")
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
.Name("Sales")
.XName("xValue")
.YName("yValue")
.Marker(ViewBag.marker)
.ErrorBar(ViewBag.errorBar)
.DataSource(ViewBag.dataSource).Add();
})
.PrimaryXAxis(xaxis =>
xaxis.MinorGridLines(ViewBag.gridlines)
.Interval(1)
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.PrimaryYAxis(yaxis =>
yaxis.LabelFormat("{value}%")
.LineStyle(ViewBag.linestyle)
.Minimum(15)
.Maximum(45)
)
.Title("Sales Distribution of Car by Region")
.Tooltip(tp => tp.Enable(true))
.LegendSettings(lg => lg.Visible(false))
.Load("load").ChartArea(area => area.Border(ViewBag.ChartBorder)).Render()
)
public ActionResult Index()
{
List<ErrorBarData> chartData = new List<ErrorBarData>
{
new ErrorBarData{ x= 2005, y= 28 },
new ErrorBarData{ x= 2006, y= 25 },
new ErrorBarData{ x= 2007, y= 26 },
new ErrorBarData{ x= 2008, y= 27 },
new ErrorBarData{ x= 2009, y= 32 },
new ErrorBarData{ x= 2010, y= 35 },
new ErrorBarData{ x= 2011, y= 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ErrorBarData
{
public double x;
public double y;
}
Changing Error Bar Type
To change the error bar rendering type using type
option of error bar. To change the error bar line length you can use verticalError
property.
@(Html.EJS().Chart("container")
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
.Name("Sales")
.XName("xValue")
.YName("yValue")
.Marker(ViewBag.marker)
.ErrorBar(ViewBag.errorBar)
.DataSource(ViewBag.dataSource).Add();
})
.PrimaryXAxis(xaxis =>
xaxis.MinorGridLines(ViewBag.gridlines)
.Interval(1)
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.PrimaryYAxis(yaxis =>
yaxis.LabelFormat("{value}%")
.LineStyle(ViewBag.linestyle)
.Minimum(15)
.Maximum(45)
)
.Title("Sales Distribution of Car by Region")
.Tooltip(tp => tp.Enable(true))
.LegendSettings(lg => lg.Visible(false))
.Load("load").ChartArea(area => area.Border(ViewBag.ChartBorder)).Render()
)
public ActionResult Index()
{
List<ErrorBarData> chartData = new List<ErrorBarData>
{
new ErrorBarData{ x= 2005, y= 28 },
new ErrorBarData{ x= 2006, y= 25 },
new ErrorBarData{ x= 2007, y= 26 },
new ErrorBarData{ x= 2008, y= 27 },
new ErrorBarData{ x= 2009, y= 32 },
new ErrorBarData{ x= 2010, y= 35 },
new ErrorBarData{ x= 2011, y= 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ErrorBarData
{
public double x;
public double y;
}
Customizing Error Bar Type
To customize the error bar type, set error bar type
as Custom
and
then change the horizontal/vertical positive and negative error of error bar.
@(Html.EJS().Chart("container")
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
.Name("Sales")
.XName("xValue")
.YName("yValue")
.Marker(ViewBag.marker)
.ErrorBar(ViewBag.errorBar)
.DataSource(ViewBag.dataSource).Add();
})
.PrimaryXAxis(xaxis =>
xaxis.MinorGridLines(ViewBag.gridlines)
.Interval(1)
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.PrimaryYAxis(yaxis =>
yaxis.LabelFormat("{value}%")
.LineStyle(ViewBag.linestyle)
.Minimum(15)
.Maximum(45)
)
.Title("Sales Distribution of Car by Region")
.Tooltip(tp => tp.Enable(true))
.LegendSettings(lg => lg.Visible(false))
.Load("load").ChartArea(area => area.Border(ViewBag.ChartBorder)).Render()
)
public ActionResult Index()
{
List<ErrorBarData> chartData = new List<ErrorBarData>
{
new ErrorBarData{ x= 2005, y= 28 },
new ErrorBarData{ x= 2006, y= 25 },
new ErrorBarData{ x= 2007, y= 26 },
new ErrorBarData{ x= 2008, y= 27 },
new ErrorBarData{ x= 2009, y= 32 },
new ErrorBarData{ x= 2010, y= 35 },
new ErrorBarData{ x= 2011, y= 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ErrorBarData
{
public double x;
public double y;
}
Changing Error Bar Mode
Error bar mode is used to define whether the error bar line has to be drawn horizontally, vertically or in both side.
To change the error bar mode use mode
option.
@(Html.EJS().Chart("container")
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
.Name("Sales")
.XName("xValue")
.YName("yValue")
.Marker(ViewBag.marker)
.ErrorBar(ViewBag.errorBar)
.DataSource(ViewBag.dataSource).Add();
})
.PrimaryXAxis(xaxis =>
xaxis.MinorGridLines(ViewBag.gridlines)
.Interval(1)
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.PrimaryYAxis(yaxis =>
yaxis.LabelFormat("{value}%")
.LineStyle(ViewBag.linestyle)
.Minimum(15)
.Maximum(45)
)
.Title("Sales Distribution of Car by Region")
.Tooltip(tp => tp.Enable(true))
.LegendSettings(lg => lg.Visible(false))
.Load("load").ChartArea(area => area.Border(ViewBag.ChartBorder)).Render()
)
public ActionResult Index()
{
List<ErrorBarData> chartData = new List<ErrorBarData>
{
new ErrorBarData{ x= 2005, y= 28 },
new ErrorBarData{ x= 2006, y= 25 },
new ErrorBarData{ x= 2007, y= 26 },
new ErrorBarData{ x= 2008, y= 27 },
new ErrorBarData{ x= 2009, y= 32 },
new ErrorBarData{ x= 2010, y= 35 },
new ErrorBarData{ x= 2011, y= 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ErrorBarData
{
public double x;
public double y;
}
Changing Error Bar Direction
To change the error bar direction to plus, minus or both side using direction
option.
@(Html.EJS().Chart("container")
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
.Name("Sales")
.XName("xValue")
.YName("yValue")
.Marker(ViewBag.marker)
.ErrorBar(ViewBag.errorBar)
.DataSource(ViewBag.dataSource).Add();
})
.PrimaryXAxis(xaxis =>
xaxis.MinorGridLines(ViewBag.gridlines)
.Interval(1)
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.PrimaryYAxis(yaxis =>
yaxis.LabelFormat("{value}%")
.LineStyle(ViewBag.linestyle)
.Minimum(15)
.Maximum(45)
)
.Title("Sales Distribution of Car by Region")
.Tooltip(tp => tp.Enable(true))
.LegendSettings(lg => lg.Visible(false))
.Load("load").ChartArea(area => area.Border(ViewBag.ChartBorder)).Render()
)
public ActionResult Index()
{
List<ErrorBarData> chartData = new List<ErrorBarData>
{
new ErrorBarData{ x= 2005, y= 28 },
new ErrorBarData{ x= 2006, y= 25 },
new ErrorBarData{ x= 2007, y= 26 },
new ErrorBarData{ x= 2008, y= 27 },
new ErrorBarData{ x= 2009, y= 32 },
new ErrorBarData{ x= 2010, y= 35 },
new ErrorBarData{ x= 2011, y= 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ErrorBarData
{
public double x;
public double y;
}
Customizing Error Bar Cap
To customize the error bar cap length, width and fill color, you can use errorBarCap
option.
@(Html.EJS().Chart("container")
.Series(sr =>
{
sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
.Name("Sales")
.XName("xValue")
.YName("yValue")
.Marker(ViewBag.marker)
.ErrorBar(ViewBag.errorBar)
.DataSource(ViewBag.dataSource).Add();
})
.PrimaryXAxis(xaxis =>
xaxis.MinorGridLines(ViewBag.gridlines)
.Interval(1)
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.PrimaryYAxis(yaxis =>
yaxis.LabelFormat("{value}%")
.LineStyle(ViewBag.linestyle)
.Minimum(15)
.Maximum(45)
)
.Title("Sales Distribution of Car by Region")
.Tooltip(tp => tp.Enable(true))
.LegendSettings(lg => lg.Visible(false))
.Load("load").ChartArea(area => area.Border(ViewBag.ChartBorder)).Render()
)
public ActionResult Index()
{
List<ErrorBarData> chartData = new List<ErrorBarData>
{
new ErrorBarData{ x= 2005, y= 28 },
new ErrorBarData{ x= 2006, y= 25 },
new ErrorBarData{ x= 2007, y= 26 },
new ErrorBarData{ x= 2008, y= 27 },
new ErrorBarData{ x= 2009, y= 32 },
new ErrorBarData{ x= 2010, y= 35 },
new ErrorBarData{ x= 2011, y= 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ErrorBarData
{
public double x;
public double y;
}
In EJ2 chart, you can draw a chart in vertical manner by changing orientation of the axis. All series types support this feature.
You can use isTransposed
property in chart to render a chart in vertical manner.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Spline).
Marker(ViewBag.Marker).
XName("xValue").
YName("yValue").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
Title("Olympic Medal Counts - RIO").IsTransposed(true).Render()
public ActionResult Index()
{
List<VerticalData> chartData = new List<VerticalData>
{
new VerticalData{ x= 2005, y= 28 },
new VerticalData{ x= 2006, y= 25 },
new VerticalData{ x= 2007, y= 26 },
new VerticalData{ x= 2008, y= 27 },
new VerticalData{ x= 2009, y= 32 },
new VerticalData{ x= 2010, y= 35 },
new VerticalData{ x= 2011, y= 30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class VerticalData
{
public double x;
public double y;
}
Pareto charts are used to find the cumulative values of data in different categories. It is a combination of Column and Line series.
The initial values are represented by column chart and the cumulative values are represented by Line chart.
To render a pareto chart, use series type
as Pareto
.