Bullet chart dimensions in React Bullet chart component
20 Jan 202320 minutes to read
Size for Container
The size of the Bullet Chart is determined by the container size, and it can be changed inline or via CSS as following.
<div id="charts" style="width:650px; height:350px"></div>
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 }} width="80%" height="90%" valueField='value' targetField='target' title='Revenue' 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 }}
width="80%"
height="90%"
valueField='value'
targetField='target'
title='Revenue'
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"));Size for Bullet Chart
The width and height properties are used to adjust the size 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 }} width="80%" height="90%" valueField='value' targetField='target' title='Revenue' 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 }}
width="80%"
height="90%"
valueField='value'
targetField='target'
title='Revenue'
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"));Pixel
Can set the size of the Bullet Chart in pixels as shown below.
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 }} width="600px" height="100px" valueField='value' targetField='target' title='Revenue' 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 }}
width="600px"
height="100px"
valueField='value'
targetField='target'
title='Revenue'
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"));Percentage
By setting a value in percentage, the Bullet Chart gets its dimension with respect to its container. For example, when the height is 50%, the Bullet Chart renders to half of the container’s height.
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 }} width="80%" height="90%" valueField='value' targetField='target' title='Revenue' 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 }}
width="80%"
height="90%"
valueField='value'
targetField='target'
title='Revenue'
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"));If the size is not specified, the Bullet Chart will be rendered with a height of 126px and a width of the window.