To display the primary data or the current value of the data being measured known as the Feature Measure that should be encoded as a bar. This is called as the Actual Bar or the Feature Bar in the Bullet Chart, and to display the actual bar the valueField
should be mapped to the appropriate field from the data source.
import { BulletChart, BulletTooltip } from '@syncfusion/ej2-charts';
BulletChart.Inject(BulletTooltip);
let chart: BulletChart = new BulletChart({
title: 'Sales Rate',
dataSource: [
{ value: 55, target: 75, category: 'Year 1' },
],
animation: { enable: false },
valueField: 'value',
ranges: [ { end: 35 },
{ end: 50 },
{ end: 100 }
],
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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
The shape of the actual bar can be customized using the type
property of the Bullet Chart. The actual bar contains Rect
and Dot
shapes. By default, the actual bar shape is Rect.
import { BulletChart, BulletTooltip } from '@syncfusion/ej2-charts';
BulletChart.Inject(BulletTooltip);
let chart: BulletChart = new BulletChart({
title: 'Sales Rate',
dataSource: [
{ value: 55, target: 75, category: 'Year 1' },
],
animation: { enable: false },
valueField: 'value',
ranges: [ { end: 35 },
{ end: 50 },
{ end: 100 }
],
type: 'Dot',
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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Using the valueBorder
property of the bullet chart, you can customize the border color
and width
of the actual bar.
import { BulletChart, BulletTooltip } from '@syncfusion/ej2-charts';
BulletChart.Inject(BulletTooltip);
let chart: BulletChart = new BulletChart({
title: 'Sales Rate',
dataSource: [
{ value: 55, target: 75, category: 'Year 1' },
],
animation: { enable: false },
valueField: 'value',
ranges: [ { end: 35 },
{ end: 50 },
{ end: 100 }
],
valueBorder: { color: 'red', width: 3 },
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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Customize the fill color and height of the actual bar using the valueFill
and valueHeight
properties of the bullet chart.
import { BulletChart, BulletTooltip } from '@syncfusion/ej2-charts';
BulletChart.Inject(BulletTooltip);
let chart: BulletChart = new BulletChart({
title: 'Sales Rate',
dataSource: [
{ value: 55, target: 75, category: 'Year 1' },
],
animation: { enable: false },
valueField: 'value',
ranges: [ { end: 35 },
{ end: 50 },
{ end: 100 }
],
valueFill: 'blue',
valueHeight: 15,
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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>