Getting Started

2 Nov 202321 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 component.

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

Installation and configuration

You can use create-react-app to setup the applications.
To install create-react-app run the following command.

    npm install -g create-react-app

  • To set-up a React application in TypeScript environment, run the following command.

       create-react-app quickstart --template typescript
   cd quickstart
   npm start

  • To set-up a React application in JavaScript environment, run the following command.

      create-react-app quickstart
  cd quickstart
  npm start

Install Syncfusion packages using below command.

   npm install @syncfusion/ej2-react-charts --save

Add Bullet Chart to the Project

Now, you can start adding Bullet Chart component in the application.
For getting started, add the Bullet Chart component in src/App.tsx file using following code.

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";
import * as React from "react";

function App() {
    return <BulletChartComponent />;
}
export default App;
import { BulletChartComponent } from "@syncfusion/ej2-react-charts";
import * as React from "react";
function App() {
    return <BulletChartComponent />;
}
export default App;

Now run the npm start command in the console, it will run your application and open the browser window.

    npm start

The below example shows a basic Bullet Chart.

import { BulletChartComponent } from "@syncfusion/ej2-react-charts";
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return <BulletChartComponent id="bulletChart"/>;
}
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import { BulletChartComponent } from "@syncfusion/ej2-react-charts";
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return <BulletChartComponent id="bulletChart" />;
}
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Module Injection

Bullet Chart are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature service in the AppModule. Please find the relevant feature service name and description as follows.

  • BulletTooltip - Inject this module in to services to use tooltip feature.

These modules should be injected to the services section as follows,

import { BulletChartComponent, BulletTooltip } from "@syncfusion/ej2-react-charts";
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (
      <BulletChartComponent id="bulletChart">
        <Inject services={[BulletTooltip]} />
      </BulletChartComponent>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import { BulletChartComponent, BulletTooltip } from "@syncfusion/ej2-react-charts";
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (<BulletChartComponent id="bulletChart">
        <Inject services={[BulletTooltip]}/>
      </BulletChartComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Bullet Chart With Data

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

const data = [
    { value: 100, target: 80 },
    { value: 200, target: 180 },
    { value: 300, target: 280 },
    { value: 400, target: 380 },
    { value: 500, target: 480 }
];
const 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 valueField and targetField respectively.

import { BulletChartComponent } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    const data = [
        { value: 100, target: 80 },
        { value: 200, target: 180 },
        { value: 300, target: 280 },
        { value: 400, target: 380 },
        { value: 500, target: 480 },
    ];
    return (<BulletChartComponent id='Revenue' style={{ textAlign: "center" }} animation={{ enable: false }} valueField='value' targetField='target' minimum={0} maximum={300} interval={50} dataSource={data}>
            </BulletChartComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import { BulletChartComponent, Inject} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {

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

    return (<BulletChartComponent id='Revenue'
                        style={{ textAlign: "center" }}
                        animation={{ enable: false }}
                        valueField='value'
                        targetField='target'
                        minimum={0}
                        maximum={300}
                        interval={50}
                        dataSource={data}>
            </BulletChartComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

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.

import { BulletChartComponent } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<BulletChartComponent id='title' style={{ textAlign: "center" }} animation={{ enable: false }} valueField='value' targetField='target' title='Revenue' minimum={0} maximum={300} interval={50} dataSource={[{ value: 270, target: 250 }]}>
            </BulletChartComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import { BulletChartComponent, Inject} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (<BulletChartComponent id='title'
                        style={{ textAlign: "center" }}
                        animation={{ enable: false }}
                        valueField='value'
                        targetField='target'
                        title='Revenue'
                        minimum={0}
                        maximum={300}
                        interval={50}
                        dataSource={[{value: 270, target: 250}]}>
            </BulletChartComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Ranges

You can add a range using BulletRangeCollectionDirective and BulletRangeDirective directives of the Bullet Chart.

import { BulletChartComponent } from '@syncfusion/ej2-react-charts';
import { BulletRangeCollectionDirective, BulletRangeDirective } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<BulletChartComponent id='ranges' style={{ textAlign: "center" }} animation={{ enable: false }} valueField='value' targetField='target' title='Revenue' minimum={0} maximum={300} interval={50} dataSource={[{ value: 270, target: 250 }]}>
                        <BulletRangeCollectionDirective>
                            <BulletRangeDirective end={100} color='red'></BulletRangeDirective>
                            <BulletRangeDirective end={200} color='blue'></BulletRangeDirective>
                            <BulletRangeDirective end={300} color='green'></BulletRangeDirective>
                        </BulletRangeCollectionDirective>

            </BulletChartComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import { BulletChartComponent, Inject} from '@syncfusion/ej2-react-charts';
import { BulletRangeCollectionDirective, BulletRangeDirective} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (<BulletChartComponent id='ranges'
                        style={{ textAlign: "center" }}
                        animation={{ enable: false }}
                        valueField='value'
                        targetField='target'
                        title='Revenue'
                        minimum={0}
                        maximum={300}
                        interval={50}
                        dataSource={[{value: 270, target: 250}]}>
                        <BulletRangeCollectionDirective>
                            <BulletRangeDirective end={100} color='red' ></BulletRangeDirective>
                            <BulletRangeDirective end={200} color='blue'></BulletRangeDirective>
                            <BulletRangeDirective end={300} color='green'></BulletRangeDirective>
                        </BulletRangeCollectionDirective>

            </BulletChartComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Tooltip

You can use tooltip for the Bullet Chart by setting the enable property to true in tooltip object and by injecting the BulletTooltip module into the services.

import { BulletChartComponent, Inject } from '@syncfusion/ej2-react-charts';
import { BulletTooltip } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<BulletChartComponent id='tooltip' style={{ textAlign: "center" }} animation={{ enable: false }} tooltip={{ enable: true }} valueField='value' targetField='target' title='Revenue' minimum={0} maximum={300} interval={50} dataSource={[{ value: 270, target: 250 }]}>
                        <Inject services={[BulletTooltip]}/>
            </BulletChartComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import { BulletChartComponent, Inject} from '@syncfusion/ej2-react-charts';
import { BulletTooltip} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (<BulletChartComponent id='tooltip'
                        style={{ textAlign: "center" }}
                        animation={{ enable: false }}
                        tooltip={{ enable: true }}
                        valueField='value'
                        targetField='target'
                        title='Revenue'
                        minimum={0}
                        maximum={300}
                        interval={50}
                        dataSource={[{value: 270, target: 250}]}>
                        <Inject services={[BulletTooltip]}/>
            </BulletChartComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));