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='container'>
<div id='element' style="width:650px; height:350px;"></div>
</div>
import { BulletChart, BulletTooltip } from '@syncfusion/ej2-charts';
BulletChart.Inject(BulletTooltip);
let chart: BulletChart = new BulletChart({
width: '650px',
height: '350px',
dataSource: [{ value: 23, target: 22 }],
animation: { enable: false },
valueField: 'value',
targetField: 'target',
ranges: [{ end: 20 },
{ end: 25 },
{ end: 30 }
],
minimum: 0, maximum: 30, interval: 5,
}, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
The width
and height
properties are used to adjust the size of the Bullet Chart.
Can set the size of the Bullet Chart in pixels as shown below.
import { BulletChart, BulletTooltip } from '@syncfusion/ej2-charts';
BulletChart.Inject(BulletTooltip);
let chart: BulletChart = new BulletChart({
//width and height for chart in pixel
width: '650', height: '350',
dataSource: [{ value: 23, target: 22 }],
animation: { enable: false },
valueField: 'value',
targetField: 'target',
ranges: [{ end: 20 },
{ end: 25 },
{ end: 30 }
],
minimum: 0, maximum: 30, interval: 5,
}, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
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 { BulletChart, BulletTooltip } from '@syncfusion/ej2-charts';
BulletChart.Inject(BulletTooltip);
let chart: BulletChart = new BulletChart({
// Width and height for chart in percentage
width: '80%', height: '90%',
dataSource: [{ value: 23, target: 22 }],
animation: { enable: false },
valueField: 'value',
targetField: 'target',
ranges: [{ end: 20 },
{ end: 25 },
{ end: 30 }
],
minimum: 0, maximum: 30, interval: 5,
}, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
If the size is not specified, the Bullet Chart will be rendered with a height of 126px and a width of the window.