The title of the Bullet Chart displays the information about the data plotted by specifying it in the title
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";
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} color='red'></BulletRangeDirective>
<BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={100} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
}
}
;
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";
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} color='red' ></BulletRangeDirective>
<BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={100} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
To show additional information about the data plotted, the Bullet Chart can also be given a subtitle using the subtitle
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";
class App extends React.Component {
render() {
return (<BulletChartComponent id='ranges' animation={{ enable: false }} valueField='value' targetField='target' title='Sales Rate in dollars' subtitle='(in dollars $)' minimum={0} maximum={100} interval={20} dataSource={[{ value: 55, target: 45 }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35} color='red'></BulletRangeDirective>
<BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={100} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
}
}
;
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";
class App extends React.Component<{}, {}>{
render() {
return (<BulletChartComponent id='ranges'
animation={{ enable: false }}
valueField='value'
targetField='target'
title='Sales Rate in dollars'
subtitle='(in dollars $)'
minimum={0}
maximum={100}
interval={20}
dataSource={[{value: 55, target: 45}]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35} color='red' ></BulletRangeDirective>
<BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={100} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
The title and the subtitle positions can be customized using the titlePosition
property. Possible positions are Left, Right, Top, and Bottom.
By setting the titlePosition
to Left, you can display the title and subtitle at the left side of the Bullet Chart.
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 in dollars' subtitle='(in dollars $)' titlePosition='Left' labelFormat='${value}' minimum={0} maximum={100} interval={20} dataSource={[{ value: 55, target: 45 }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35} color='red'></BulletRangeDirective>
<BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={100} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
}
}
;
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";
class App extends React.Component<{}, {}>{
render() {
return (<BulletChartComponent id='ranges'
animation={{ enable: false }}
valueField='value'
targetField='target'
title='Sales Rate in dollars'
subtitle='(in dollars $)'
titlePosition='Left'
labelFormat='${value}'
minimum={0}
maximum={100}
interval={20}
dataSource={[{value: 55, target: 45}]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35} color='red' ></BulletRangeDirective>
<BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={100} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
By setting the titlePosition
to Right, you can display the title and subtitle at the right side of the Bullet Chart.
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 in dollars' subtitle='(in dollars $)' titlePosition='Right' labelFormat='${value}' minimum={0} maximum={100} interval={20} dataSource={[{ value: 55, target: 45 }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35} color='red'></BulletRangeDirective>
<BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={100} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
}
}
;
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";
class App extends React.Component<{}, {}>{
render() {
return (<BulletChartComponent id='ranges'
animation={{ enable: false }}
valueField='value'
targetField='target'
title='Sales Rate in dollars'
subtitle='(in dollars $)'
titlePosition='Right'
labelFormat='${value}'
minimum={0}
maximum={100}
interval={20}
dataSource={[{value: 55, target: 45}]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35} color='red' ></BulletRangeDirective>
<BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={100} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
By setting the titlePosition
to Top, you can display the title and subtitle at the top of the Bullet Chart. The default title and subtitle positions of the Bullet Chart is Top.
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 in dollars' subtitle='(in dollars $)' titlePosition='Top' labelFormat='${value}' minimum={0} maximum={100} interval={20} dataSource={[{ value: 55, target: 45 }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35} color='red'></BulletRangeDirective>
<BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={100} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
}
}
;
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";
class App extends React.Component<{}, {}>{
render() {
return (<BulletChartComponent id='ranges'
animation={{ enable: false }}
valueField='value'
targetField='target'
title='Sales Rate in dollars'
subtitle='(in dollars $)'
titlePosition='Top'
labelFormat='${value}'
minimum={0}
maximum={100}
interval={20}
dataSource={[{value: 55, target: 45}]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35} color='red' ></BulletRangeDirective>
<BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={100} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
By setting the titlePosition
to Bottom, you can display the title and subtitle at the bottom of the Bullet Chart.
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 in dollars' subtitle='(in dollars $)' titlePosition='Bottom' labelFormat='${value}' minimum={0} maximum={100} interval={20} dataSource={[{ value: 55, target: 45 }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35} color='red'></BulletRangeDirective>
<BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={100} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
}
}
;
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";
class App extends React.Component<{}, {}>{
render() {
return (<BulletChartComponent id='ranges'
animation={{ enable: false }}
valueField='value'
targetField='target'
title='Sales Rate in dollars'
subtitle='(in dollars $)'
titlePosition='Bottom'
labelFormat='${value}'
minimum={0}
maximum={100}
interval={20}
dataSource={[{value: 55, target: 45}]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35} color='red' ></BulletRangeDirective>
<BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={100} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
The title color, opacity, font size, font family, font weight, and font style can be customized using the titleStyle
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";
class App extends React.Component {
render() {
return (<BulletChartComponent id='ranges' animation={{ enable: false }} valueField='value' targetField='target' title='Sales Rate in dollars' subtitle='(in dollars $)' labelFormat='${value}' minimum={0} maximum={100} interval={20} titleStyle={{ size: '22px', color: 'red', fontFamily: 'cursive', fontWeight: 'Bold' }} dataSource={[{ value: 55, target: 45 }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35} color='red'></BulletRangeDirective>
<BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={100} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
}
}
;
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";
class App extends React.Component<{}, {}>{
render() {
return (<BulletChartComponent id='ranges'
animation={{ enable: false }}
valueField='value'
targetField='target'
title='Sales Rate in dollars'
subtitle='(in dollars $)'
labelFormat='${value}'
minimum={0}
maximum={100}
interval={20}
titleStyle={{size: '22px', color:'red', fontFamily:'cursive', fontWeight:'Bold'}}
dataSource={[{value: 55, target: 45}]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35} color='red' ></BulletRangeDirective>
<BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={100} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
The sub-title color, opacity, font size, font family, font weight, and font style can be customized using the subtitleStyle
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";
class App extends React.Component {
render() {
return (<BulletChartComponent id='ranges' animation={{ enable: false }} valueField='value' targetField='target' title='Sales Rate in dollars' subtitle='(in dollars $)' labelFormat='${value}' minimum={0} maximum={100} interval={20} subtitleStyle={{ size: '22px', color: 'red', fontFamily: 'cursive', fontWeight: 'Bold' }} dataSource={[{ value: 55, target: 45 }]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35} color='red'></BulletRangeDirective>
<BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={100} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
}
}
;
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";
class App extends React.Component<{}, {}>{
render() {
return (<BulletChartComponent id='ranges'
animation={{ enable: false }}
valueField='value'
targetField='target'
title='Sales Rate in dollars'
subtitle='(in dollars $)'
labelFormat='${value}'
minimum={0}
maximum={100}
interval={20}
subtitleStyle={{size: '22px', color:'red', fontFamily:'cursive', fontWeight:'Bold'}}
dataSource={[{value: 55, target: 45}]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={35} color='red' ></BulletRangeDirective>
<BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={100} color='green'></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
}
};
ReactDOM.render(<App />, document.getElementById("charts"));