Ranges in React Bullet chart component
20 Jan 20236 minutes to read
Ranges represent the quality of a specific range such as Good, Bad and Satisfactory in the Bullet Chart scale. The ending point of a qualitative range is specified in the end
property in ranges
. The minimum
value of a quantitative scale is considered the starting point of the first range or the previous range end point.
Color Customization
Enhance the readability of ranges with color and opacity. It can be applied using the color
and opacity
properties in ranges
.
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 }} height="400" valueField='value' targetField='target' categoryField='category' categoryLabelStyle={{ color: 'red', size: '13', fontWeight: 'bold' }} title='ales Rate' minimum={0} maximum={100} interval={10} dataSource={[{ value: 55, target: 7.5, category: 'Year 1' },
{ value: 7, target: 5, category: 'Year 2' },
{ value: 10, target: 6, category: 'Year 3' }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35} color='darkred' opacity={0.5}></BulletRangeDirective>
<BulletRangeDirective end={50} color='red' opacity={1}></BulletRangeDirective>
<BulletRangeDirective end={75} color='blue' opacity={0.7}></BulletRangeDirective>
<BulletRangeDirective end={90} color='lightgreen' opacity={1}></BulletRangeDirective>
<BulletRangeDirective end={100} color='green' opacity={1}></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 }}
height="400"
valueField='value'
targetField='target'
categoryField='category'
categoryLabelStyle={{color:'red', size:'13', fontWeight:'bold'}}
title='ales Rate'
minimum={0}
maximum={100}
interval={10}
dataSource={[{value: 55, target: 7.5, category: 'Year 1'},
{value: 7, target: 5, category: 'Year 2'},
{value: 10, target: 6, category: 'Year 3'}]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35} color='darkred' opacity={0.5}></BulletRangeDirective>
<BulletRangeDirective end={50} color='red' opacity={1}></BulletRangeDirective>
<BulletRangeDirective end={75} color='blue' opacity={0.7}></BulletRangeDirective>
<BulletRangeDirective end={90} color='lightgreen' opacity={1}></BulletRangeDirective>
<BulletRangeDirective end={100} color='green' opacity={1}></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));