HelpBot Assistant

How can I help you?

ES5 getting started with EJ2 JavaScript Bullet Chart control

19 Feb 202616 minutes to read

This section explains the steps required to create a simple Bullet Chart and demonstrates 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

Setup for local environment

Follow these steps to set up your local environment.

Step 1: Create a root folder myapp for your application.

Step 2: Create myapp/resources folder to store local scripts and styles.

Step 3: Create myapp/index.js and myapp/index.html files for initializing the Syncfusion Essential JS 2 Bullet Chart control.

Adding Syncfusion resources

The Essential JS 2 Bullet Chart control can be initialized in either of the following ways.

  • Using local script.
  • Using CDN links for scripts.

Using local script

You can get the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed location.

After installing the Essential JS 2 product build, you can copy the Bullet Chart and its dependency scripts and style files into the resources/scripts and resources/styles folder.

The following shows the path to the Bullet Chart’s script and style files.

Syntax:

Dependency script: **(installed location)**/Syncfusion/Essential Studio/JavaScript - EJ2/{RELEASE_VERSION}/Web (Essential JS 2)/JavaScript/{DEPENDENCY_PACKAGE_NAME}/dist/global/{DEPENDENCY_PACKAGE_NAME}.min.js

Script: **(installed location)**/Syncfusion/Essential Studio/JavaScript - EJ2/{RELEASE_VERSION}/Web (Essential JS 2)/JavaScript/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Example:

Dependency script: C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/32.1.19/Web (Essential JS 2)/JavaScript/ej2-base/dist/global/ej2-base.min.js

Script: C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/32.1.19/Web (Essential JS 2)/JavaScript/ej2-charts/dist/global/ej2-charts.min.js

After copying the files, reference the chart scripts from index.html. The following HTML shows the minimal bullet chart dependencies.


<!DOCTYPE html>
  <html xmlns="https://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2 Bullet Chart</title>

            <!-- Essential JS 2 Bullet Chart's dependent scripts -->
            <script src="resources/scripts/ej2-base.min.js" type="text/javascript"></script>
            <script src="resources/scripts/ej2-svg-base.min.js" type="text/javascript"></script>

            <!-- Essential JS 2 Bullet Chart's global script -->
            <script src="resources/scripts/ej2-charts.min.js" type="text/javascript"></script>
       </head>
       <body>
       </body>
  </html>

Using CDN links, you can reference the Bullet Chart control’s script in the index.html.

Refer the Bullet Chart’s CDN links as follows.

Syntax:

Script: https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Example:

Script: https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js

The following HTML shows the minimal bullet chart dependencies using CDN scripts.

<!DOCTYPE html>
  <html xmlns="https://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2 Bullet Chart</title>
            <!-- Essential JS 2 Bullet Chart's global script -->
            <script src="https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>
       </head>
       <body>
       </body>
  </html>

Adding Bullet Chart control

Now you can add the Bullet Chart control to the application. To get started, add a div element for the Bullet Chart in index.html. Then reference the index.js file in index.html.

This document uses ej2.min.js, which includes all Essential JS 2 components and dependencies.

<!DOCTYPE html>
  <html xmlns="https://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2 Bullet Chart</title>
            <!-- Essential JS 2 all script -->
            <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
       </head>
       <body>
           <!-- Add the HTML <div> element for Bullet Chart  -->
             <div id="element"></div>
             <script src="index.js" type="text/javascript"></script>
       </body>
  </html>

Place the following Bullet Chart initialization code in index.js.

var bulletChart = new ej.charts.BulletChart();
bulletChart.appendTo('#element');

The following example shows a basic Bullet Chart.

var bulletChart = new ej.charts.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://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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 With Data

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

var data = [
     { 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 the dataSource property. The value and target fields should be mapped to valueField and targetField, respectively.

var bulletChart = new ej.charts.BulletChart({
    dataSource: [{ value: 100, target: 80 },
            { value: 200, target: 180 },
            { value: 300, target: 280 },
            { value: 400, target: 380 },
            { value: 500, target: 480 }],
    valueField: 'value',
    targetField: 'target',
    height: '300',
    minimum: 0, maximum: 500, 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://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>

Add Bullet Chart Title

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

var bulletChart = new ej.charts.BulletChart({
    dataSource: [{ value: 270, target: 250 },],
    valueField: 'value',
    targetField: '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://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>

Ranges

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

var bulletChart = new ej.charts.BulletChart({
    dataSource: [{ value: 270, target: 250 },],
    valueField: 'value',
    targetField: '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://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>

Tooltip

You can use the tooltip for the Bullet Chart by setting the enable property to true in the tooltip object.

var bulletChart = new ej.charts.BulletChart({
        dataSource: [{ value: 270, target: 250 },],
        valueField: 'value',
        targetField: 'target',
        title: 'Revenue',
        minimum: 0, maximum: 300, interval: 50,
        ranges: [{ end: 100, color: 'red' },
        { end: 200, color: 'blue' },
        { end: 300, color: 'green' }
        ],
        tooltip: {
            enable: true
        }
});
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://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>