Title in React Bullet chart component
20 Jan 202324 minutes to read
Title
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";
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} color='red'></BulletRangeDirective>
<BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
<BulletRangeDirective end={100} 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'
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>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Subtitle
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";
function App() {
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>);
}
;
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 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>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Title and SubTitle Position
The title and the subtitle positions can be customized using the titlePosition property. Possible positions are Left, Right, Top, and Bottom.
Position as Left
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";
function App() {
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>);
}
;
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 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>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Position as Right
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";
function App() {
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>);
}
;
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 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>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Position as Top
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";
function App() {
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>);
}
;
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 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>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Position as Bottom
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";
function App() {
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>);
}
;
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 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>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Title Customization
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";
function App() {
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>);
}
;
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 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>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));SubTitle Customization
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";
function App() {
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>);
}
;
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 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>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));