Share on twitter
Share on facebook
Share on linkedin
Essential JS 2 Bullet Chart

Introducing Essential JS 2 Bullet Chart

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

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

Multiple targets

The Bullet Chart allows us to compare the measures with multiple targets.Multiple targets in the Bullet Chart for JavaScript

Multiple measures

Bullet chart allows the comparison of several measures at once.Multiple measures in JavaScript Bullet Chart

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

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

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

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 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 htmlfile.
  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 ChartYou can find the live demo of this project here.

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. Also, you can check out the Bullet Chart source on GitHub. Please take a look at our live demos in our sample browser, and customization features in our documentation.

The JavaScript Bullet Chart component is also available for the ReactAngularASP.NET Core,  Blazor and MVC 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, Direct-Trac, or feedback portal.

If you like this blog post, we think you’ll also like the following free ebooks!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top