To render a box and whisker chart, use series type
as BoxAndWhisker
and inject
BoxAndWhiskerSeries
module using Chart.Inject(BoxAndWhiskerSeries)
method. The field y requires n number of data or it should contains minimum of five values to plot a segment.
var chart = new ej.charts.Chart({
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'Category',
},
//Initializing Chart Series
series: [
{
type: 'BoxAndWhisker',
dataSource: [
{ x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
{ x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
{ x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
{ x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
{ x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
{ x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
{ x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
{ x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
{ x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
],
xName: 'x',
yName: 'y',
marker: {
visible: true,
width: 10,
height: 10
},
}
],
}, '#element');
<!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/20.4.38/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>
Customization of Waterfall Series
The negative changes of waterfall series 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’.
var chartData = [
{ x: 'Income', y: 4711 }, { x: 'Sales', y: -1015 },
{ x: 'Development', y: -688 },
{ x: 'Revenue', y: 1030 }, {x: 'Balance'},
{ x: 'Administrative', y: -780 },
{ x: 'Expense', y: -361 }, { x: 'Tax', y: -695 },
{ x: 'Net Profit'}
];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
majorGridLines: {width: 0},
},
primaryYAxis:
{
labelFormat: '${value}M',
minimum: 0, maximum: 5500, interval: 500,
majorGridLines: {width: 0},
lineStyle: { width: 0},
majorTickLines: { width: 0}
},
series:[
{
dataSource: chartData, width:2,
xName: 'x', yName:'y', intermediateSumIndexes: [4], sumIndexes: [8],
name: 'USA',columnWidth: 0.6,
//Series type as Waterfall
type: 'Waterfall', animation: { enable: true },
marker: {
dataLabel: { visible: true, position: 'Outer' }
}, summaryFillColor:'#e56590', negativeFillColor:'#f8b883',
connector: { color: '#5F6A6A', width: 1.5}
}
],
title: 'Company Revenue and Profit'
}, '#element');
<!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/20.4.38/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>
Histogram type charts can provide a visual display of large amounts of data that are difficult to understand in a tabular or spreadsheet form. To render a histogram chart, use series type
as Histogram
and inject HistogramSeries
module using Chart.Inject(HistogramSeries)
method.
var chartData = [];
var points = [5.250, 7.750, 0, 8.275, 9.750, 7.750, 8.275, 6.250, 5.750,
5.250, 23.000, 26.500, 27.750, 25.025, 26.500, 26.500, 28.025, 29.250, 26.750, 27.250,
26.250, 25.250, 34.500, 25.625, 25.500, 26.625, 36.275, 36.250, 26.875, 40.000, 43.000,
46.500, 47.750, 45.025, 56.500, 56.500, 58.025, 59.250, 56.750, 57.250,
46.250, 55.250, 44.500, 45.525, 55.500, 46.625, 46.275, 56.250, 46.875, 43.000,
46.250, 55.250, 44.500, 45.425, 55.500, 56.625, 46.275, 56.250, 46.875, 43.000,
46.250, 55.250, 44.500, 45.425, 55.500, 46.625, 56.275, 46.250, 56.875, 41.000, 63.000,
66.500, 67.750, 65.025, 66.500, 76.500, 78.025, 79.250, 76.750, 77.250,
66.250, 75.250, 74.500, 65.625, 75.500, 76.625, 76.275, 66.250, 66.875, 80.000, 85.250,
87.750, 89.000, 88.275, 89.750, 97.750, 98.275, 96.250, 95.750, 95.250
];
points.map(function (value) {
chartData.push({
y: value
});
});
var chart = new ej.charts.Chart({
primaryXAxis: {
minimum: 0, maximum: 100
},
legendSettings: { visible: false },
primaryYAxis: {
minimum: 0, maximum: 50, interval: 10,
},
series: [
{
type: 'Histogram', width: 2, yName: 'y', name: 'Score',
dataSource: chartData, binInterval: 20,
showNormalDistribution: true, columnWidth: 0.99
}
],
}, '#element');
<!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/20.4.38/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 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.
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');
<!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/20.4.38/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 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.
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,
type: 'Percentage',
verticalError:4
}, marker: {
visible: true,
}, animation: { enable: false },
name: 'India',
type: 'Line'
}],
title: 'Unemployment rate (%)',
}, '#element');
<!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/20.4.38/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>
Custom 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.
var chartData: any[] = [
{ 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');
<!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/20.4.38/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>
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.
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');
<!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/20.4.38/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>
Changing Error Bar Direction
To change the error bar direction to plus, minus or both side using direction
option.
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');
<!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/20.4.38/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.
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');
<!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/20.4.38/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>
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.
var chartData = [
{ x: 'Jan', y: -1 }, { x: 'Feb', y: -1 }, { x: 'Mar', y: 2 },
{ x: 'Apr', y: 8 }, { x: 'May', y: 13 }, { x: 'Jun', y: 18 },
{ x: 'Jul', y: 21 }, { x: 'Aug', y: 20 }, { x: 'Sep', y: 16 },
{ x: 'Oct', y: 10 }, { x: 'Nov', y: 4 }, { x: 'Dec', y: 0 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Month',
valueType: 'Category'
},
primaryYAxis: {
minimum: -5, maximum: 25, interval: 10,
labelFormat: '{value}˚C',
majorGridLines: { width : 0}
}
series:[{
dataSource: chartData, width:2,
xName: 'x', yName: 'y',
name: 'London',
// Series type as spline series
type: 'Spline',
marker: { visible: true}
}],
isTransposed: true,
title: 'Climate Graph-2012'
}, '#element');
<!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/20.4.38/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>