React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Target Bar in React Bullet Chart component

30 Sep 2022 / 2 minutes to read

The line marker that runs perpendicular to the orientation of the graph is known as the Comparative Measure and it is used as a target marker to compare against the feature measure value. This is also called as the Target Bar in the Bullet Chart. To display the target bar, the targetField should be mapped to the appropriate field from the datasource.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
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";
class App extends React.Component {
    render() {
        return (<BulletChartComponent id='ranges' animation={{ enable: false }} valueField='value' targetField='target' title='Sales Rate' minimum={0} maximum={100} interval={20} dataSource={[{ value: 55, target: 75 }]}>
                        <BulletRangeCollectionDirective>
                            <BulletRangeDirective end={35}></BulletRangeDirective>
                            <BulletRangeDirective end={50}></BulletRangeDirective>
                            <BulletRangeDirective end={100}></BulletRangeDirective>
                        </BulletRangeCollectionDirective>
            </BulletChartComponent>);
    }
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
Copied to clipboard
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";

class App extends React.Component<{}, {}>{
  render() {
    return (<BulletChartComponent id='ranges'
                animation={{ enable: false }}
                        valueField='value'
                        targetField='target'
                        title='Sales Rate'
                        minimum={0}
                        maximum={100}
                        interval={20}
                        dataSource={[{value: 55, target: 75}]}>
                        <BulletRangeCollectionDirective>
                            <BulletRangeDirective end={35} ></BulletRangeDirective>
                            <BulletRangeDirective end={50} ></BulletRangeDirective>
                            <BulletRangeDirective end={100} ></BulletRangeDirective>
                        </BulletRangeCollectionDirective>
            </BulletChartComponent>);
  }
};
ReactDOM.render(<App />, document.getElementById("charts"));

Types of Target Bar

The shape of the target bar can be customized using the targetTypes property and it supports Circle, Cross, and Rect shapes. The default type of the target bar is Rect.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
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";
class App extends React.Component {
    render() {
        return (<BulletChartComponent id='ranges' animation={{ enable: false }} valueField='value' targetField='target' title='Sales Rate' targetTypes={['Circle']} minimum={0} maximum={100} interval={20} dataSource={[{ value: 55, target: 75 }]}>
                        <BulletRangeCollectionDirective>
                            <BulletRangeDirective end={35}></BulletRangeDirective>
                            <BulletRangeDirective end={50}></BulletRangeDirective>
                            <BulletRangeDirective end={100}></BulletRangeDirective>
                        </BulletRangeCollectionDirective>
            </BulletChartComponent>);
    }
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
Copied to clipboard
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";

class App extends React.Component<{}, {}>{
  render() {
    return (<BulletChartComponent id='ranges'
                animation={{ enable: false }}
                        valueField='value'
                        targetField='target'
                        title='Sales Rate'
                        targetTypes={['Circle']}
                        minimum={0}
                        maximum={100}
                        interval={20}
                        dataSource={[{value: 55, target: 75}]}>
                        <BulletRangeCollectionDirective>
                            <BulletRangeDirective end={35} ></BulletRangeDirective>
                            <BulletRangeDirective end={50} ></BulletRangeDirective>
                            <BulletRangeDirective end={100} ></BulletRangeDirective>
                        </BulletRangeCollectionDirective>
            </BulletChartComponent>);
  }
};
ReactDOM.render(<App />, document.getElementById("charts"));

Target Bar Customization

The following properties can be used to customize the Target Bar.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
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";
class App extends React.Component {
    render() {
        return (<BulletChartComponent id='ranges' animation={{ enable: false }} valueField='value' targetField='target' title='Sales Rate' targetColor='red' targetWidth={15} minimum={0} maximum={100} interval={20} dataSource={[{ value: 55, target: 75 }]}>
                    <BulletRangeCollectionDirective>
                        <BulletRangeDirective end={35}></BulletRangeDirective>
                        <BulletRangeDirective end={50}></BulletRangeDirective>
                        <BulletRangeDirective end={100}></BulletRangeDirective>
                    </BulletRangeCollectionDirective>
        </BulletChartComponent>);
    }
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
Copied to clipboard
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";

class App extends React.Component<{}, {}>{
  render() {
return (<BulletChartComponent id='ranges'
            animation={{ enable: false }}
                    valueField='value'
                    targetField='target'
                    title='Sales Rate'
                    targetColor='red'
                    targetWidth={15}
                    minimum={0}
                    maximum={100}
                    interval={20}
                    dataSource={[{value: 55, target: 75}]}>
                    <BulletRangeCollectionDirective>
                        <BulletRangeDirective end={35} ></BulletRangeDirective>
                        <BulletRangeDirective end={50} ></BulletRangeDirective>
                        <BulletRangeDirective end={100} ></BulletRangeDirective>
                    </BulletRangeCollectionDirective>
        </BulletChartComponent>);
  }
};
ReactDOM.render(<App />, document.getElementById("charts"));
Previous
Next