Getting Started

27 Jun 202521 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

To easily set up a React application, use create-vite-app, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions. Vite sets up your environment using JavaScript and optimizes your application for production.

Note: To create a React application using create-react-app, refer to this documentation for more details.

To create a new React application, run the following command.

npm create vite@latest my-app

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

npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev

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

npm create vite@latest my-app -- --template react
cd my-app
npm run dev

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.

app.jsx

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

function App() {
    return <BulletChartComponent />;
}
export default App;

app.tsx

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

Now run the npm run dev command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.

    npm run dev

The below example shows a basic Bullet Chart.

app.jsx

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"));

app.tsx

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,

app.jsx

import { BulletChartComponent, BulletTooltip, Inject } 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"));

app.tsx

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.

app.jsx

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

app.tsx

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.

app.jsx

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={500} interval={50} dataSource={data}>
            </BulletChartComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

app.tsx

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={500}
                        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.

app.jsx

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"));

app.tsx

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.

app.jsx

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"));

app.tsx

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.

app.jsx

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"));

app.tsx

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"));