JavaScript

Search results

Getting started with JavaScript Bullet Chart control

08 May 2023 / 5 minutes to read

This section explains you the steps required to create a simple Bullet Chart and demonstrate the basic usage of the Bullet Chart control.

Dependencies

Below is the list of minimum dependencies required to use the Bullet Chart.

|-- @syncfusion/ej2-charts
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-svg-base

Installation and Configuration

To get you started with Bullet Chart component, you can clone the Essential JS 2 quickstart project and install necessary packages by using the following commands.

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

Bullet Chart packages need to be mapped in system.config.js configuration file.

System.config({
paths: {
    'syncfusion:': './node_modules/@syncfusion/',
},
map: {
    app: 'app',

    //Syncfusion packages mapping
    "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
    "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
    "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
    "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
    "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
    "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
    "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
    "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
    "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
    "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
    "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
    "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
    "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
    "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
,
},
packages: {
    'app': { main: 'app', defaultExtension: 'js' }
}
});

The project is preconfigured with common settings (src/styles/styles.css, system.config.js ) to start with all Essential JS 2 components.

Add Bullet Chart to the Project

Add the HTML div element for Bullet Chart into your index.html. [src/index.html]

<!DOCTYPE html>
<html lang="en">

<head>
<title>EJ2 Bullet Chart</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>
 <!--container which is going to render the Bullet Chart-->
 <div id='element'>
 </div>
</body>

</html>

Now import the Bullet Chart component into your app.ts to instantiate a bullet chart and append the bullet chart instance to the #element [src/app/app.ts]

import { BulletChart } from '@syncfusion/ej2-charts';

// initialize BulletChart component
let bulletChart: BulletChart = new BulletChart();

// render initialized Bullet Chart
bulletChart.appendTo('#element');

Now use the npm run start command to run the application in the browser.

npm run start

The below example shows a basic Chart.

Source

Preview

index.ts

index.html

index.css

import { BulletChart } from '@syncfusion/ej2-charts';

let bulletChart: BulletChart = new BulletChart();

bulletChart.appendTo('#element');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Bullet Chart</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>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

#element {
    display: block;
    height: 350px;
}

Module Injection

Bullet Chart component are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature module using BulletChart.Inject() method. In the current application,we are going to use tooltip feature of the chart.

BulletTooltip - Inject this provider to use tooltip feature.

Now import the above mentioned modules from Bullet Chart package and inject it into the Bullet Chart component using BulletChart.Inject method.

import { BulletChart, BulletTooltip } from '@syncfusion/ej2-charts';
BulletChart.Inject(BulletTooltip);

BulletChart With Data

This section explains how to plot local data to the Bullet Chart.

let data: any[] = [
   { value: 100, target: 80 },
   { value: 200, target: 180 },
   { value: 300, target: 280 },
   { value: 400, target: 380 },
   { value: 500, target: 480 },
];

Now assign the local data to dataSource property. value and target values should be mapped with valueName and targetName respectively.

Source

Preview

index.ts

index.html

import { BulletChart } from '@syncfusion/ej2-charts';
let bulletChart: BulletChart = new BulletChart({
dataSource: [{ value: 100, target: 80 },
        { value: 200, target: 180 },
        { value: 300, target: 280 },
        { value: 400, target: 380 },
        { value: 500, target: 480 }],
valueName: 'value',
targetName: 'target',
height: '300',
minimum: 0, maximum: 300, interval: 50,
});
bulletChart.appendTo('#element');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Bullet Chart</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>

Add Bullet Chart Title

You can add a title using title property to the Bullet Chart to provide quick information to the user about the data plotted in the Bullet Chart.

Source

Preview

index.ts

index.html

import { BulletChart } from '@syncfusion/ej2-charts';
let bulletChart: BulletChart = new BulletChart({
dataSource: [{ value: 270, target: 250 },],
valueName: 'value',
targetName: 'target',
title: 'Revenue',
minimum: 0, maximum: 300, interval: 50,
});
bulletChart.appendTo('#element');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Bullet Chart</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>

Ranges

You can add a range using ranges property to the Bullet Chart.

Source

Preview

index.ts

index.html

import { BulletChart } from '@syncfusion/ej2-charts';
let bulletChart: BulletChart = new BulletChart({
dataSource: [{ value: 270, target: 250 },],
valueName: 'value',
targetName: 'target',
title: 'Revenue',
minimum: 0, maximum: 300, interval: 50,
ranges: [{ end: 100, color: 'red' },
    { end: 200, color: 'blue' },
    { end: 300, color: 'green' }
    ],
});
bulletChart.appendTo('#element');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Bullet Chart</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>

You can use tooltip for the Bullet Chart by setting the enable property to true in tooltip object and by injecting the BulletTooltip module using BulletChart.Inject(BulletTooltip) method.

Source

Preview

index.ts

index.html

import { BulletChart, BulletTooltip } from '@syncfusion/ej2-charts';
BulletChart.Inject(BulletTooltip);
let bulletChart: BulletChart = new BulletChart({
tooltip: { enable: true },
dataSource: [{ value: 70, target: 50 }],
valueField: 'value',
targetField: 'target',
animation: { enable: false },
ranges: [{ end: 30, color: '#599C20' },
    { end: 60, color: '#EFC820' },
    { end: 100, color: '#CA4218' }
],
minimum: 0, maximum: 100, interval: 10,
title: 'Revenue YTD'
});
bulletChart.appendTo('#element');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Bullet Chart</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>

Contents

Dependencies
Installation and Configuration
Add Bullet Chart to the Project
Module Injection
BulletChart With Data
Add Bullet Chart Title
Ranges
Tooltip

Contents

Dependencies
Installation and Configuration
Add Bullet Chart to the Project
Module Injection
BulletChart With Data
Add Bullet Chart Title
Ranges
Tooltip

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!