Ranges in JavaScript Bullet Chart control

22 Jul 2021 / 2 minutes to read

’ Ranges ’ represent the quality of a specific range as ‘Good’, ‘Bad’, and ‘Satisfactory’ in the ‘Bullet-chart scale.’ The ‘Ending’ point of the qualitative range is specified by the property End. The ’ Minimum value ’ of a quantitative scale is considered as the starting point for the ‘First range’ and the ‘Previous range’ end points are considered as the starting point for other ranges.

Source

Preview

index.ts

index.html

import { BulletChart, BulletTooltip } from '@syncfusion/ej2-charts';
BulletChart.Inject(BulletTooltip);

let chart: BulletChart = new 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 },
        { end: 50 },
        { end: 100 }
        ],
        minimum: 0, maximum: 100, interval: 20,
        height: '400'
}, '#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>

Color Customization

‘Color’ is customized with the ’ Color ’ property based on the ‘End’ values for each qualitative range. You can also customize the opacity of the ‘Color’ of each range.

Source

Preview

index.ts

index.html

import { BulletChart, BulletTooltip } from '@syncfusion/ej2-charts';
BulletChart.Inject(BulletTooltip);

let chart: BulletChart = new 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');

<!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>