Tool tip in React Bullet chart component
20 Jan 20237 minutes to read
When the mouse is hovered over a bar in the Bullet Chart, the tooltip displays important summary about the actual and the target bar values.
Default Tooltip
The tooltip is not visible by default. To make it visible, set the enable property in the tooltip 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 }} height="400" valueField='value' targetField='comparativeMeasureValue' categoryField='category' title='Profit in %' minimum={0} maximum={20} interval={5} tooltip={{ enable: true }} dataSource={[{ value: 5, comparativeMeasureValue: 7.5, category: '2001' },
{ value: 7, comparativeMeasureValue: 5, category: '2002' },
{ value: 10, comparativeMeasureValue: 6, category: '2003' },
{ value: 5, comparativeMeasureValue: 8, category: '2004' },
{ value: 12, comparativeMeasureValue: 5, category: '2005' },
{ value: 8, comparativeMeasureValue: 6, category: '2006' },]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={5}></BulletRangeDirective>
<BulletRangeDirective end={15}></BulletRangeDirective>
<BulletRangeDirective end={20}></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='comparativeMeasureValue'
categoryField='category'
title='Profit in %'
minimum={0}
maximum={20}
interval={5}
tooltip={{enable: true}}
dataSource={[{value: 5, comparativeMeasureValue: 7.5, category: '2001'},
{value: 7, comparativeMeasureValue: 5, category: '2002'},
{value: 10, comparativeMeasureValue: 6, category: '2003'},
{value: 5, comparativeMeasureValue: 8, category: '2004'},
{value: 12, comparativeMeasureValue: 5, category: '2005'},
{value: 8, comparativeMeasureValue: 6, category: '2006'},]}>
<BulletRangeCollectionDirective>
<BulletRangeDirective end={5} ></BulletRangeDirective>
<BulletRangeDirective end={15}></BulletRangeDirective>
<BulletRangeDirective end={20}></BulletRangeDirective>
</BulletRangeCollectionDirective>
</BulletChartComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Tooltip Template
Any HTML elements can be displayed in the tooltip by using the template property of the tooltip. You can use the ${target} and ${value} as place holders in the HTML element to display the value and target values from the data source of corresponding data point.
Customize the Appearance of Tooltip
The fill and border properties are used to customize the background color and border of the tooltip respectively. The textStyle property in the tooltip is used to customize the font of the tooltip text.
Tooltip Customization
The following properties can be used to customize the Bullet Chart tooltip.