Comparative bar in React Bullet chart component
22 Dec 202313 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.
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' 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>);
}
;
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'
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>);
};
export default App;
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.
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' 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>);
}
;
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'
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>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Target bar customization
The following properties can be used to customize the target bar. Also, you can bind the color for the target bar from dataSource for the bullet chart.
-
targetColor- Specifies the fill color of Target Bar. -
targetWidth- Specifies the width of Target Bar.
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' animation={{ enable: false }} valueField='value' targetField='target' title='Sales Rate' targetColor='color' targetWidth={15} minimum={0} maximum={100} interval={20} dataSource={[{ value: 55, target: 75, color: 'red' }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35}></BulletRangeDirective>
<BulletRangeDirective end={50}></BulletRangeDirective>
<BulletRangeDirective end={100}></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'
animation={{ enable: false }}
valueField='value'
targetField='target'
title='Sales Rate'
targetColor='color'
targetWidth={15}
minimum={0}
maximum={100}
interval={20}
dataSource={[{ value: 55, target: 75, color: 'red' }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35} ></BulletRangeDirective>
<BulletRangeDirective end={50} ></BulletRangeDirective>
<BulletRangeDirective end={100} ></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));