The bullet chart can be rendered to its container’s size. You can set the size using inline or CSS as shown below.
<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>You can also set the size for bullet chart directly using the width and height properties.
In Pixel
You can set the size of a 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>In 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 { 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>Note: When you do not specify the size, it takes 126px as its height and window size as its width.