Bullet Chart can be rendered in different mode as Horizontal
or vertical
by using orientation
property of the bullet-chart. By default bullet-chart rendered in horizontal mode.
var chart = new ej.charts.BulletChart({
title: 'Sales Rate in dollars',
subtitle: '(in dollars $)',
dataSource: [
{ value: 55, target: 45, category: 'Year 1' },
],
animation: { enable: false },
targetField: 'target',
valueField: 'value',
labelFormat: '${value}',
ranges: [ { end: 35 },
{ end: 50 },
{ end: 100 }
],
width: '20%',
orientation: 'Vertical',
minimum: 0, maximum: 100, interval: 20
}, '#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/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>
Using enableRtl
boolean property of the bullet-chart, you can render bullet-chart in right to left or left to right direction.
var chart = new ej.charts.BulletChart({
dataSource: [
{ value: 1500, target: 1000, category: 'Year 1' },
],
animation: { enable: false },
targetField: 'target',
valueField: 'value',
ranges: [{ end: 500 },
{ end: 1500 },
{ end: 2000 }
],
enableRtl: true,
minimum: 0, maximum: 2000, interval: 200
}, '#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/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>
By setting animation
property value as true
, you can enable the linear animation of the feature and target bars.
var chart = new ej.charts.BulletChart({
dataSource: [
{ value: 1500, target: 1000, category: 'Year 1' },
],
animation: { enable: true },
targetField: 'target',
valueField: 'value',
ranges: [ { end: 500 },
{ end: 1500 },
{ end: 2000 }
],
minimum: 0, maximum: 2000, interval: 200
}, '#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/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>
Bullet chart also support different types of themes. Using theme
property of the bullet-chart, you can customize the theme styles.
var chart = new ej.charts.BulletChart({
dataSource: [
{ value: 1500, target: 1000, category: 'Year 1' },
],
animation: { enable: true },
targetField: 'target',
valueField: 'value',
ranges: [ { end: 500 },
{ end: 1500 },
{ end: 2000 }
],
minimum: 0, maximum: 2000, interval: 200
}, '#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/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>