--- title: "Introducing Essential JS 2 Bullet Chart" published_at: "2020-01-22T12:00:51+00:00" modified_at: "2025-04-23T07:54:26+00:00" url: "https://www.syncfusion.com/blogs/post/introducing-essential-js-2-bullet-chart" excerpt: "We are happy to introduce the new Bullet Chart control for the Essential JS 2 suite. It comes with the following functionalities: Web accessibility Touch-friendly features Right-to-left rendering Lightweight UIs Bullet charts are used to visually compare measures, like the..." taxonomy_category: - "Angular" - "ASP.NET Core" - "ASP.NET MVC" - "Blazor" - "JavaScript" - "React" - "Vue" taxonomy_post_tag: - "Angular" - "Data Visualization" - "JavaScript" - "React" - "Web Development" --- # Introducing Essential JS 2 Bullet Chart [Gowrimathi S](https://www.syncfusion.com/blogs/author/gowrimathis) ![Essential JS 2 Bullet Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Essential-JS-2-Bullet-Chart.jpg) We are happy to introduce the new [Bullet Chart control](https://www.syncfusion.com/javascript-ui-controls/js-bullet-chart) for the Essential JS 2 suite. It comes with the following functionalities: - Web accessibility - Touch-friendly features - Right-to-left rendering - Lightweight UIs Bullet charts are used to visually compare measures, like the commonly used bar chart. They display one or more measures and compare them with a target value. You can also display measures in a range of performance such as poor, satisfactory, and good.![Essential JS 2 Bullet Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Essential-JS-2-Bullet-Chart.png) In this blog, we will provide a walk-through on the Bullet Chart control and its features. ## Orientation The Bullet Chart component renders in both vertical and horizontal directions, which will be helpful when viewing a chart on different devices.![Horizontal and Vertical Orientation of Bullet Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Horizontal-and-Vertical-Orientation-of-Bullet-Chart.png) ## Multiple targets The Bullet Chart allows us to compare the measures with multiple targets.![Multiple targets in the Bullet Chart for JavaScript](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Multiple-targets-in-the-Bullet-Chart-for-JavaScript.png) ## Multiple measures Bullet chart allows the comparison of several measures at once.![Multiple measures in JavaScript Bullet Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Multiple-measures-in-JavaScript-Bullet-Chart.png) ## Ranges The qualitative ranges in a bullet chart help measure the performance of data. Each color of the range represents a quality such as good, bad, and acceptable.![Ranges in JavaScript Bullet Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Ranges-in-JavaScript-Bullet-Chart.png) ## Labels and ticks Ticks are the major scale indicators of a bullet chart, and labels will be placed on the major ticks. You can apply a range’s color to the ticks and labels that are associated with it.![Labels and Ticks in JavaScript Bullet Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Labels-and-Ticks-in-JavaScript-Bullet-Chart.png) ## Tooltip The Bullet Chart lets you display details about measures and targets through a tooltip that appears when hovering the mouse over the measures.![Tooltip in JavaScript Bullet Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Tooltip-in-JavaScript-Bullet-Chart.png) ## Customization We can configure the look and feel of a bullet chart to match requirements using several built-in options. The control supports the following themes: - Fabric - Material - High contrast - Bootstrap ## Getting started with the Bullet Chart in TypeScript Let’s create a bullet chart to visualize and compare measures. The Bullet Chart control can be configured in TypeScript as follows: 1. Clone the [Essential JS 2 quick-start seed repository](https://github.com/syncfusion/ej2-quickstart) and configure the necessary package in the **config.js** file.``` "@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-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js" ``` 2. Install the NPM packages by using the following command.``` npm install ``` 3. Add the HTML input element that needs to be initialized as a component in the **html** file. 4. Initialize the component in the **ts** file as shown in the following code.``` import { BulletChart } from '@syncfusion/ej2-charts'; // initialize bullet chart component let chart: BulletChart = new BulletChart( { dataSource: [{ value: 270, target: 250 }], valueField: 'value', targetField: 'target', ranges: [{end : 150}, {end : 250}, {end : 300}], title: Revenue YTD, } ); // render initialized bullet chart chart.appendTo('#container'); ``` ![JavaScript Bullet Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/JavaScript-Bullet-Chart.png)You can find the live demo of this project [here](https://stackblitz.com/edit/cd8dka?file=index.ts) . ## Conclusion We hope you will find the Bullet Chart component user-friendly, and we look forward to you trying it out. You can find the Essential JS 2 install download link [on our website](https://www.syncfusion.com/downloads/essential-js2) . Also, you can check out the Bullet Chart source on [GitHub](https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/charts) . Please take a look at our live demos in our [sample browser](https://ej2.syncfusion.com/demos/#/material/bullet-chart/default.html) , and customization features in our [documentation](https://ej2.syncfusion.com/documentation/bullet-chart/getting-started/) . The JavaScript Bullet Chart component is also available for the [React](https://ej2.syncfusion.com/react/demos/#/material/bullet-chart/default) , [Angular](https://ej2.syncfusion.com/angular/demos/#/material/bullet-chart/default) , [ASP.NET Core](https://ej2.syncfusion.com/aspnetcore/BulletChart/Default#/material) , [Blazor](https://blazor.syncfusion.com/demos/BulletChart/DefaultFunctionalities?theme=bootstrap4) and [MVC](https://ej2.syncfusion.com/aspnetmvc/BulletChart/Default#/material) frameworks, built from their own TypeScript libraries. If you wish to send us feedback or would like to ask any questions, please feel free to post in the comments section below, or contact us through our [support forum](https://www.syncfusion.com/forums) , [Direct-Trac](https://www.syncfusion.com/support/directtrac/) , or [feedback portal](https://www.syncfusion.com/feedback/) . *If you like this blog post, we think you’ll also like the following free ebooks!*- [JavaScript Succinctly](https://www.syncfusion.com/ebooks/javascript) - [TypeScript Succinctly](https://www.syncfusion.com/ebooks/typescript) - *[AngularJS Succinctly](https://www.syncfusion.com/ebooks/angularjs)* - [Angular 2 Succinctly](https://www.syncfusion.com/ebooks/angular2_succinctly)