JavaScript (ES5)
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Customization in JavaScript (ES5) Bullet Chart control

Bullet Chart can be rendered in different mode as Horizontal or vertical by using orientation property of the bullet-chart. By default bullet-chart rendered in horizontal mode.

Source
Preview
index.js
index.html
var chart = new ej.charts.BulletChart({
        title: 'Sales Rate in dollars',
        subtitle: '(in dollars $)',
        dataSource: [
        { value: 55, target: 45, category: 'Year 1'  },
        ],
        animation: { enable: false },
        targetField: 'target',
        valueField: 'value',
        labelFormat: '${value}',
        ranges: [ { end: 35 },
        { end: 50 },
        { end: 100 }
        ],
        width: '20%',
        orientation: 'Vertical',
        minimum: 0, maximum: 100, interval: 20
}, '#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/dist/ej2.min.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>

Flow Direction

Using enableRtl boolean property of the bullet-chart, you can render bullet-chart in right to left or left to right direction.

Source
Preview
index.js
index.html
var chart = new ej.charts.BulletChart({
    dataSource: [
        { value: 1500, target: 1000, category: 'Year 1'  },
        ],
        animation: { enable: false },
        targetField: 'target',
        valueField: 'value',
        ranges: [{ end: 500 },
        { end: 1500 },
        { end: 2000 }
        ],
        enableRtl: true,
        minimum: 0, maximum: 2000, interval: 200
}, '#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/dist/ej2.min.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>

Animation

By setting animation property value as true, you can enable the linear animation of the feature and target bars.

Source
Preview
index.js
index.html
var chart = new ej.charts.BulletChart({
       dataSource: [
        { value: 1500, target: 1000, category: 'Year 1'  },
        ],
        animation: { enable: true },
        targetField: 'target',
        valueField: 'value',
        ranges: [ { end: 500 },
        { end: 1500 },
        { end: 2000 }
        ],
        minimum: 0, maximum: 2000, interval: 200
}, '#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/dist/ej2.min.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>

Theme

Bullet chart also support different types of themes. Using theme property of the bullet-chart, you can customize the theme styles.

Source
Preview
index.js
index.html
var chart = new ej.charts.BulletChart({
       dataSource: [
        { value: 1500, target: 1000, category: 'Year 1'  },
        ],
        animation: { enable: true },
        targetField: 'target',
        valueField: 'value',
        ranges: [ { end: 500 },
        { end: 1500 },
        { end: 2000 }
        ],
        minimum: 0, maximum: 2000, interval: 200
}, '#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/dist/ej2.min.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>
Previous
Next