Bullet chart dimensions in EJ2 JavaScript Bullet chart control
8 May 20237 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='container'>
<div id='element' style="width:650px; height:350px;"></div>
</div>
<!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://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Size for Bullet Chart
The width
and height
properties are used to adjust the size of the Bullet Chart.
Pixel
Can set the size of the Bullet Chart in pixels as shown below.
var chart = new ej.charts.BulletChart({
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://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
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.
var chart = new ej.charts.BulletChart({
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://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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.