Error Bar in ASP.NET CORE Charts Component
17 Apr 202320 minutes to read
Error Bar
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.
<ejs-chart id="container" width="60%">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
<e-series-errorbar visible="true"></e-series-errorbar>
</e-series>
</e-series-collection>
</ejs-chart>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;
}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.
<ejs-chart id="container" load="window.onload" width="60%">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
<e-series-errorbar visible="true" type="Percentage" verticalError="4"></e-series-errorbar>
</e-series>
</e-series-collection>
</ejs-chart>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.
<ejs-chart id="container" title="Sales Distribution of Car by Region">
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Double"></e-chart-primaryxaxis>
<e-chart-primaryyaxis labelFormat="{value}%" minimum="15" maximum="45">
</e-chart-primaryyaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="Sales"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
<e-series-errorbar visible="true" type="Custom" mode="Both" verticalPositiveError="2"
horizontalPositiveError="1" verticalNegativeError="2" horizontalNegativeError="1"></e-series-errorbar>
</e-series>
</e-series-collection>
</ejs-chart>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;
}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.
<ejs-chart id="container" load="window.onload" width="60%">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
<e-series-errorbar visible="true" mode="Horizontal"></e-series-errorbar>
</e-series>
</e-series-collection>
</ejs-chart>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;
}Error Bar Direction
To change the error bar direction to plus, minus or both side using Direction option.
<ejs-chart id="container" load="window.onload" width="60%">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
<e-series-errorbar visible="true" mode="Vertical" direction="Minus"></e-series-errorbar>
</e-series>
</e-series-collection>
</ejs-chart>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.
<ejs-chart id="container" load="window.onload" width="60%">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
<e-series-errorbar visible="true">
<e-errorbarcap length="10" width="10" color="#0000ff"></e-errorbarcap>
</e-series-errorbar>
</e-series>
</e-series-collection>
</ejs-chart>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 Color
To customize the error bar color for individual errors, use the ErrorBarColorMapping property. You can also customize the vertical error, horizontal error, horizontal negative and positive error and vertical negative and positive error for an individual point using VerticalError, HorizontalError, HorizontalNegativeError, HorizontalPositiveError, VerticalNegativeError and VerticalPositiveError properties.
<ejs-chart id="container" load="window.onload" title="Unemployment rate (%)">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" width="2" name="India"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
<e-series-marker visible="true"></e-series-marker>
<e-series-errorbar visible="true" verticalError="error" errorBarColorMapping="color">
</e-series>
</e-series-collection>
<e-chart-primaryxaxis minimum="2005" maximum="2012" interval="1" title="Year">
</e-chart-primaryxaxis>
</ejs-chart>public ActionResult Index()
{
List<ErrorBarData> chartData = new List<ErrorBarData>
{
new ErrorBarData{ x= 2006, y= 7.8, color= 'red', error= 1.5 },
new ErrorBarData{ x= 2007, y= 7.2, color= 'green', error= 2.5 },
new ErrorBarData{ x= 2008, y= 6.8, color= 'blue', error= 3.5 },
new ErrorBarData{ x= 2009, y= 5.7, color= 'yellow', error= 1.5 },
new ErrorBarData{ x= 2010, y= 10.8, color= 'grey', error= 0.5 },
new ErrorBarData{ x= 2011, y= 9.8, color= 'brown', error= 1 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ErrorBarData
{
public double x;
public double y;
public string color;
public double error;
}