Axis customization in React Bullet chart component
20 Jan 202324 minutes to read
MajorTickLines and MinorTickLines Customization
The following properties can be used to customize majorTicklines and minorTicklines.
- width - Specifies the width of ticklines.
- height - Specifies the height of ticklines.
- color - Specifies the color of ticklines.
- useRangeColor - Specifies the color of ticklines and represents the color from corresponding range colors.
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='Revenue' majorTickLines={{ color: 'blue', width: 5 }} minorTickLines={{ width: 4, color: 'red' }} minimum={0} maximum={30} interval={5} dataSource={[{ value: 23, target: 22 }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={20} color='red'></BulletRangeDirective>
<BulletRangeDirective end={25} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={30} 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'
animation={{ enable: false }}
valueField='value'
targetField='target'
title='Revenue'
majorTickLines={{ color: 'blue', width: 5}}
minorTickLines={{ width: 4, color: 'red'}}
minimum={0}
maximum={30}
interval={5}
dataSource={[{value: 23, target: 22}]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={20} color='red' ></BulletRangeDirective>
<BulletRangeDirective end={25} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={30} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Tick Placement
The major and the minor ticks can be placed inside or outside the ranges using the tickPosition property.
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='Revenue' tickPosition='inside' minimum={0} maximum={30} interval={5} dataSource={[{ value: 23, target: 22 }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={20} color='red'></BulletRangeDirective>
<BulletRangeDirective end={25} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={30} 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'
animation={{ enable: false }}
valueField='value'
targetField='target'
title='Revenue'
tickPosition='inside'
minimum={0}
maximum={30}
interval={5}
dataSource={[{value: 23, target: 22}]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={20} color='red' ></BulletRangeDirective>
<BulletRangeDirective end={25} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={30} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Label Format
Axis numeric labels can be formatted by using the labelFormat property. Axis labels support all globalize formats.
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='Revenue' labelFormat='c' minimum={0} maximum={30} interval={5} dataSource={[{ value: 23, target: 22 }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={20} color='red'></BulletRangeDirective>
<BulletRangeDirective end={25} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={30} 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'
animation={{ enable: false }}
valueField='value'
targetField='target'
title='Revenue'
labelFormat='c'
minimum={0}
maximum={30}
interval={5}
dataSource={[{value: 23, target: 22}]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={20} color='red' ></BulletRangeDirective>
<BulletRangeDirective end={25} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={30} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));The following table describes the result of applying some commonly used formats to numeric axis labels.
| Label Value | Label Format property value | Result | Description |
| 1000 | n1 | 1000.0 | The Number is rounded to 1 decimal place |
| 1000 | n2 | 1000.00 | The Number is rounded to 2 decimal place |
| 1000 | n3 | 1000.000 | The Number is rounded to 3 decimal place |
| 0.01 | p1 | 1.0% | The Number is converted to percentage with 1 decimal place |
| 0.01 | p2 | 1.00% | The Number is converted to percentage with 2 decimal place |
| 0.01 | p3 | 1.000% | The Number is converted to percentage with 3 decimal place |
| 1000 | c1 | $1000.0 | The Currency symbol is appended to number and number is rounded to 1 decimal place |
| 1000 | c2 | $1000.00 | The Currency symbol is appended to number and number is rounded to 2 decimal place |
GroupingSeparator
To separate the groups of thousands, set the enableGroupSeparator property to true
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' enableGroupSeparator={true} minimum={0} maximum={2500} interval={250} dataSource={[{ value: 1500, target: 1300 }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={500} color='red'></BulletRangeDirective>
<BulletRangeDirective end={1500} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={2500} 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'
animation={{ enable: false }}
valueField='value'
targetField='target'
title='Sales Rate'
enableGroupSeparator={true}
minimum={0}
maximum={2500}
interval={250}
dataSource={[{value: 1500, target: 1300}]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={500} color='red' ></BulletRangeDirective>
<BulletRangeDirective end={1500} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={2500} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Custom Label Format
Using the labelFormat property, axis labels can be specified with a custom defined format in addition to the axis value. The label format uses a placeholder such as ${value}K, which represents the axis label.
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' labelFormat='${value}K' minimum={0} maximum={2500} interval={250} dataSource={[{ value: 1500, target: 1300 }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={500} color='red'></BulletRangeDirective>
<BulletRangeDirective end={1500} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={2500} 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'
animation={{ enable: false }}
valueField='value'
targetField='target'
title='Sales Rate'
labelFormat='${value}K'
minimum={0}
maximum={2500}
interval={250}
dataSource={[{value: 1500, target: 1300}]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={500} color='red' ></BulletRangeDirective>
<BulletRangeDirective end={1500} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={2500} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Label Placement
Label can be placed Inside or Outside of the ranges using the labelPosition property.
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='Revenue' labelPosition='inside' minimum={0} maximum={30} interval={5} dataSource={[{ value: 23, target: 22 }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={20} color='red'></BulletRangeDirective>
<BulletRangeDirective end={25} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={30} 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'
animation={{ enable: false }}
valueField='value'
targetField='target'
title='Revenue'
labelPosition='inside'
minimum={0}
maximum={30}
interval={5}
dataSource={[{value: 23, target: 22}]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={20} color='red' ></BulletRangeDirective>
<BulletRangeDirective end={25} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={30} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Opposed Position
To place an axis opposite to its original position, set the opposedPosition property to true.
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='Revenue' majorTickLines={{ color: 'blue', width: 5 }} minorTickLines={{ width: 4, color: 'red' }} opposedPosition={true} minimum={0} maximum={30} interval={5} dataSource={[{ value: 23, target: 22 }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={20} color='red'></BulletRangeDirective>
<BulletRangeDirective end={25} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={30} 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'
animation={{ enable: false }}
valueField='value'
targetField='target'
title='Revenue'
majorTickLines={{ color: 'blue', width: 5}}
minorTickLines={{ width: 4, color: 'red'}}
opposedPosition={true}
minimum={0}
maximum={30}
interval={5}
dataSource={[{value: 23, target: 22}]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={20} color='red' ></BulletRangeDirective>
<BulletRangeDirective end={25} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={30} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Category Label
The Bullet Chart supports X-axis label by specifying the property from the data source to the categoryField. It helps to understand the input data in a more efficient way.
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' categoryField='category' minimum={0} maximum={2500} interval={250} dataSource={[{ value: 1500, target: 1300, category: 'Product A' }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={500} color='red'></BulletRangeDirective>
<BulletRangeDirective end={1500} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={2500} 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'
animation={{ enable: false }}
valueField='value'
targetField='target'
title='Sales Rate'
categoryField='category'
minimum={0}
maximum={2500}
interval={250}
dataSource={[{value: 1500, target: 1300, category: 'Product A'}]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={500} color='red' ></BulletRangeDirective>
<BulletRangeDirective end={1500} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={2500} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Category Label Customization
The label color, opacity, font size, font family, font weight, and font style can be customized by using the categoryLabelStyle setting for category and the labelStyle setting for axis label. The useRangeColor property specifies the color of the axis label and represents the color from the corresponding range colors.
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' categoryField='category' categoryLabelStyle={{ color: 'Orange' }} minimum={0} maximum={2500} interval={250} dataSource={[{ value: 1500, target: 1300, category: 'Product A' }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={500} color='red'></BulletRangeDirective>
<BulletRangeDirective end={1500} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={2500} 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'
animation={{ enable: false }}
valueField='value'
targetField='target'
title='Sales Rate'
categoryField='category'
categoryLabelStyle={{ color:'Orange' }}
minimum={0}
maximum={2500}
interval={250}
dataSource={[{value: 1500, target: 1300, category: 'Product A'}]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={500} color='red' ></BulletRangeDirective>
<BulletRangeDirective end={1500} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={2500} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));