Search results

Ranges in JavaScript (ES5) Bullet Chart control

18 Oct 2021 / 2 minutes to read

Ranges represent the quality of a specific range such as Good, Bad and Satisfactory in the Bullet Chart scale. The ending point of a qualitative range is specified in the end property in ranges. The minimum value of a quantitative scale is considered the starting point of the first range or the previous range end point.

Source
Preview
index.html
Copied to clipboard
<!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>

Color Customization

Enhance the readability of ranges with color and opacity. It can be applied using the color and opacity properties in ranges.

Source
Preview
index.js
index.html
Copied to clipboard
var chart = new ej.charts.BulletChart({
      title: 'Sales Rate',
        dataSource: [
        { value: 55, target: 75, category: 'Year 1'  },
        { value: 70, target: 70, category: 'Year 2'  },
        { value: 85, target: 75, category: 'Year 3'  }
        ],
        animation: { enable: false },
        valueField: 'value',
        targetField: 'target',
        categoryField: 'category',
        categoryLabelStyle: { color: 'red', size: '13', fontWeight: 'bold'},
        ranges: [ { end: 35, color: 'darkred', opacity: 0.5 },
        { end: 50, color: 'red', opacity: 1 },
        { end: 75, color: 'blue', opacity: 0.7 },
        { end: 90, color: 'lightgreen', opacity: 1 },
        { end: 100, color: 'green', opacity: 1 }
        ],
        minimum: 0, maximum: 100, interval: 10,
        height: '400'
}, '#element');
Copied to clipboard
<!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>