JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Error Bar in JavaScript (ES5) Chart control

06 Jun 2023 / 3 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 and inject ErrorBar module using Chart.Inject(ErrorBar) method.

Source
Preview
index.js
index.html
Copied to clipboard
var chartData = [
    { x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
    { x: 2008, y: 6.8 }, { x: 2009, y: 10.7 },
    { x: 2010, y: 10.8 }, { x: 2011, y: 9.8 }
];
var chart = new ej.charts.Chart({
    primaryXAxis: {
        minimum: 2005, maximum: 2012, interval: 1,
        title: 'Year'
    },
    primaryYAxis: {
        minimum: 3, maximum: 12,
        interval: 1, title: 'Percentage',
        labelFormat: '{value}%'
    },
    series: [{
        dataSource: chartData,
        xName: 'x', yName: 'y',
        errorBar: {
            visible: true,
        }, marker: {
            visible: true,
        }, animation: { enable: false },
        name: 'India',
        type: 'Line'
    }],
    title: 'Unemployment rate (%)',

}, '#element');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Customizing Error Bar

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.

Source
Preview
index.js
index.html
Copied to clipboard
var chartData = [
    { x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
    { x: 2008, y: 6.8 }, { x: 2009, y: 5.7 },
    { x: 2010, y: 8.8 }, { x: 2011, y: 9.8 }
];
var chart = new ej.charts.Chart({
    primaryXAxis: {
        minimum: 2005, maximum: 2012, interval: 1,
        title: 'Year'
    },
    primaryYAxis: {
        minimum: 3, maximum: 12,
        interval: 1, title: 'Percentage',
        labelFormat: '{value}%'
    },
    series: [{
        dataSource: chartData,
        xName: 'x', yName: 'y',
        errorBar: {
            visible: true,
            type: 'Custom',
            mode:'Both',
            verticalPostiveError:3,
            horizontalPositiveError:2,
            verticalNegativeError:3,
            horizontalNegativeError:2
        }, marker: {
            visible: true,
        }, animation: { enable: false },
        name: 'India',
        type: 'Line'
    }],
    title: 'Unemployment rate (%)',

}, '#element');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

Source
Preview
index.js
index.html
Copied to clipboard
var chartData = [
    { x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
    { x: 2008, y: 6.8 }, { x: 2009, y: 5.7 },
    { x: 2010, y: 8.8 }, { x: 2011, y: 9.8 }
];
var chart = new ej.charts.Chart({
    primaryXAxis: {
        minimum: 2005, maximum: 2012, interval: 1,
        title: 'Year'
    },
    primaryYAxis: {
        minimum: 3, maximum: 12,
        interval: 1, title: 'Percentage',
        labelFormat: '{value}%'
    },
    series: [{
        dataSource: chartData,
        xName: 'x', yName: 'y',
        errorBar: {
            visible: true,
            mode: 'Horizontal'
        }, marker: {
            visible: true,
        }, animation: { enable: false },
        name: 'India',
        type: 'Line'
    }],
    title: 'Unemployment rate (%)',

}, '#element');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Error Bar Direction

To change the error bar direction to plus, minus or both side using direction option.

Source
Preview
index.js
index.html
Copied to clipboard
var chartData = [
    { x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
    { x: 2008, y: 6.8 }, { x: 2009, y: 10.7 },
    { x: 2010, y: 10.8 }, { x: 2011, y: 9.8 }
];
var chart = new ej.charts.Chart({
    primaryXAxis: {
        minimum: 2005, maximum: 2012, interval: 1,
        title: 'Year'
    },
    primaryYAxis: {
        minimum: 3, maximum: 12,
        interval: 1, title: 'Percentage',
        labelFormat: '{value}%'
    },
    series: [{
        dataSource: chartData,
        xName: 'x', yName: 'y',
        errorBar: {
            visible: true,
           mode:'Vertical',
           direction:'Minus'
        }, marker: {
            visible: true,
        }, animation: { enable: false },
        name: 'India',
        type: 'Line'
    }],
    title: 'Unemployment rate (%)',

}, '#element');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Customizing Error Bar Cap

To customize the error bar cap length, width and fill color, you can use errorBarCap option.

Source
Preview
index.js
index.html
Copied to clipboard
var chartData = [
    { x: 2006, y: 7.8 }, { x: 2007, y: 7.2 },
    { x: 2008, y: 6.8 }, { x: 2009, y: 10.7 },
    { x: 2010, y: 10.8 }, { x: 2011, y: 9.8 }
];
var chart = new ej.charts.Chart({
    primaryXAxis: {
        minimum: 2005, maximum: 2012, interval: 1,
        title: 'Year'
    },
    primaryYAxis: {
        minimum: 3, maximum: 12,
        interval: 1, title: 'Percentage',
        labelFormat: '{value}%'
    },
    series: [{
        dataSource: chartData,
        xName: 'x', yName: 'y',
        errorBar: {
            visible: true,
        errorBarCap:{
            length:10,
            width:10,
            color:'#0000ff'
        }
        }, marker: {
            visible: true,
        }, animation: { enable: false },
        name: 'India',
        type: 'Line'
    }],
    title: 'Unemployment rate (%)',

}, '#element');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Customizing Error Bar Color

To customise 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.

Source
Preview
index.js
index.html
Copied to clipboard
var chartData = [
    { x: 2006, y: 7.8, color: 'red', error: 4 }, { x: 2007, y: 7.2, color: 'blue', error: 3 },
    { x: 2008, y: 6.8, color: 'green', error: 1 }, { x: 2009, y: 10.7, color: 'orange', error: 5 },
    { x: 2010, y: 10.8, color: 'yellow', error: 7 }, { x: 2011, y: 9.8, color: 'grey', error: 2 }
];
var chart = new ej.charts.Chart({
    primaryXAxis: {
        minimum: 2005, maximum: 2012, interval: 1,
        title: 'Year'
    },
    primaryYAxis: {
        minimum: 3, maximum: 12,
        interval: 1, title: 'Percentage',
        labelFormat: '{value}%'
    },
    series: [{
        dataSource: chartData,
        xName: 'x', yName: 'y',
        errorBar: {
            visible: true,
            errorBarColorMapping: 'color',
            verticalError: 'error'
        }, marker: {
            visible: true,
        }, animation: { enable: false },
        name: 'India',
        type: 'Line'
    }],
    title: 'Unemployment rate (%)',

}, '#element');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See Also

Previous
Next