Getting Started with Syncfusion® JavaScript (ES5) Bullet Chart Control

22 Jul 20265 minutes to read

Build your first Syncfusion JavaScript (ES5) application with a simple Bullet Chart in just a few minutes. This quickstart guides you through creating a minimal, runnable HTML page that loads the Syncfusion EJ2 (ES5) Bullet Chart from the CDN, initializes it with sample data, and renders an interactive value-and-target comparison.

Prerequisites

Dependencies

The Bullet Chart control ships as part of the @syncfusion/ej2-charts package. Below is the list of minimum dependencies required.

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

Quick Setup

Step 1: Create Folder and HTML file

  • Create a folder named quickstart in your desired directory.
  • Inside the quickstart folder, create two new files: index.html and index.js.

Step 2: Add Syncfusion® CDN Resources

Include the following JavaScript links in the <head> section.

Scripts (JavaScript):

<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>

Or, to load all Syncfusion components in a single combined bundle:

<script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>

Step 3: Add the Syncfusion® Bullet Chart Control to the Application

The index.html file references a separate index.js file that contains the Bullet Chart component initialization. This keeps your markup and script logic cleanly separated, which is the recommended pattern for Syncfusion® JavaScript (ES5) apps.

index.js imports nothing manually — the global scripts added in Step 2 register the ej.charts.BulletChart class on the ej namespace. The script then builds the Bullet Chart component with sample value/target data and renders the control into the #element container declared in index.html.

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/34.1.29/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>

The new ej.charts.BulletChart({...}) call creates the Bullet Chart component. The configuration object accepts the following key options:

  • dataSource — Array of data points. Each item needs a value and a target (or remap them with valueField/targetField).
  • valueField — Field name in dataSource mapped to the value bar.
  • targetField — Field name in dataSource mapped to the target marker.
  • minimum, maximum, interval — Numeric axis range and tick spacing.
  • title — Text shown above the chart.

Finally, bulletChart.appendTo('#element') renders the control into the <div id="element"> element declared in index.html.

Step 4: Open in Browser

Open quickstart/index.html through a local web server. With the VS Code Live Server extension installed, right-click index.html in the Explorer and choose Open with Live Server, then visit the URL it prints (for example, http://127.0.0.1:5500/). You should see the Syncfusion Bullet Chart control displaying the sample data.

Output

The chart now renders five value bars with their target markers between 0 and 500, with tick marks every 50 units.

Troubleshooting

  • ej is not defined. Confirm that ej2-charts.min.js is loaded before your script. Place the <script> tag inside the <head> or just before your own <script src="index.js"> tag.
  • The container is empty. Make sure the id in your markup (#element) matches the selector passed to appendTo('#element').
  • The value bar is hidden. Confirm that valueField and targetField match the field names in your dataSource and that the values fall within [minimum, maximum].
  • Ranges don’t appear. Verify that each ranges[].end is between minimum and maximum, and that end values are sorted ascending.