You can customize the width
, color
, and size
of minor and major tick lines using the
majorTickLines
and
minorTickLines
properties of the bullet-chart.
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='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>);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
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='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>);
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
You can place major and minor ticks inside
or outside
the ranges using the tickPosition
property of bullet-chart.
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='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>);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
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='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>);
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
Axis Label Format
Axis numeric labels can be formatted by using the labelFormat
property. Axis labels support all globalize formats. The following table describes the result of applying some commonly used label formats on numeric axis values.
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='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>);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
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='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>);
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
The following ‘Table’ describes the result of applying some commonly used ‘Label’ formats on Numeric axis values.
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 |
To separate groups of thousands, use the enableGroupSeparator
property of bullet-chart.
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'
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>);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
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' 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>);
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
You can also customize the axis label format using a placeholder like ${value}K, in which the value represents the axis label, e.g. $20K.
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'
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>);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
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' 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>);
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
You can customize the axis labels inside
or outside
the bullet-chart using the labelPosition
property.
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='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>);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
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='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>);
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
To place an axis opposite to its original position,
set the opposedPosition
property to true.
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='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>);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
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='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>);
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
You can display the x axis label by mapping the categoryField
from dataSource of a bullet-chart. It is a more efficient way to understand data.
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'
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>);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
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' 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>);
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
You can customize the category label by using the categoryLabelStyle
property of the bullet-chart.
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'
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>);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
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' 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>);
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));