Horizontal Bullet Chart

Select a theme:

                     <html>
<head>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-bullet.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-table.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>
  
  <div id="container"></div>
  

  <script>

    anychart.onDocumentReady(function () {
      // The data used in this sample can be obtained from the CDN
      // https://cdn.anychart.com/samples/bullet-chart/horizontal-bullet-chart-with-negative-values/data.json
      anychart.data.loadJsonFile(
        'https://cdn.anychart.com/samples/bullet-chart/horizontal-bullet-chart-with-negative-values/data.json',
        function (data) {
          var dataSet = data;

          var table = anychart.standalones.table();
          table.getCol(1).width(100).hAlign('right').cellPadding(0, 10, 0, 0);
          table
            .getCol(3)
            .width(60)
            .useHtml(true)
            .hAlign('center')
            .cellPadding(0, 0, 0, 0);
          table.getRow(0).fontSize(15);
          table.cellBorder(null);
          table.getRow(1).cellBorder().bottom('1px #CECECE');
          table.getCol(1).cellBorder().right('1px #CECECE');
          table.getCol(2).cellPadding(0, 0, 0, 10);

          table.contents([
            [null, null, null, null, null],
            [null, 'Region', null, null, null],
            [
              null,
              'Alabama',
              createBulletChart('Alabama'),
              calculatePercentToTarget('Alabama'),
              null
            ],
            [
              null,
              'Alaska',
              createBulletChart('Alaska'),
              calculatePercentToTarget('Alaska'),
              null
            ],
            [
              null,
              'Arizona',
              createBulletChart('Arizona'),
              calculatePercentToTarget('Arizona'),
              null
            ],
            [
              null,
              'Idaho',
              createBulletChart('Idaho'),
              calculatePercentToTarget('Idaho'),
              null
            ],
            [
              null,
              'Illinois',
              createBulletChart('Illinois'),
              calculatePercentToTarget('Illinois'),
              null
            ],
            [
              null,
              'Indiana',
              createBulletChart('Indiana'),
              calculatePercentToTarget('Indiana'),
              null
            ],
            [
              null,
              'Ohio',
              createBulletChart('Ohio'),
              calculatePercentToTarget('Ohio'),
              null
            ],
            [
              null,
              'Oklahoma',
              createBulletChart('Oklahoma'),
              calculatePercentToTarget('Oklahoma'),
              null
            ],
            [
              null,
              'Oregon',
              createBulletChart('Oregon'),
              calculatePercentToTarget('Oregon'),
              null
            ],
            [
              null,
              'Vermont',
              createBulletChart('Vermont'),
              calculatePercentToTarget('Vermont'),
              null
            ],
            [
              null,
              'Virginia',
              createBulletChart('Virginia'),
              calculatePercentToTarget('Virginia'),
              null
            ],
            [
              null,
              'Washington',
              createBulletChart('Washington'),
              calculatePercentToTarget('Washington'),
              null
            ],
            [null, null, null, null, null]
          ]);
          table.getCol(0).width(40);
          table.getCol(4).width(40);

          table
            .getCell(0, 1)
            .colSpan(3)
            .content('ACME corp. Sales by Region')
            .hAlign('center')
            .vAlign('bottom')
            .fontColor('#212121')
            .fontSize(16);
          table.getCell(0, 1).colSpan(3).border().right('white');

          table.getCell(1, 0).border().bottom('white');
          table.getCell(1, 4).border().bottom('white');
          table.getCell(14, 1).border().right('white');

          table
            .getCell(1, 2)
            .colSpan(2)
            .content('Variance from target')
            .hAlign('right');

          table.container('container');
          table.vAlign('middle');
          table.draw();

          function createBulletChart(name) {
            var data = dataSet[name];
            var target = summ(data.toGoal);
            var actual = summ(data.actualSales);
            var bullet = anychart.bullet([
              {
                value: Math.round(actual),
                type: 'bar',
                gap: 0.7,
                fill: '#545f69',
                stroke: null
              },
              {
                value: Math.round(target),
                type: 'line',
                gap: 0.2,
                fill: '#545f69',
                stroke: {
                  thickness: 2,
                  color: '#545f69'
                }
              }
            ]);
            bullet
              .margin(5, 55, 5, 0)
              .axis(null)
              .title(false)
              .padding(0, -1)
              .layout('horizontal');

            return bullet;
          }

          function calculatePercentToTarget(name) {
            var data = dataSet[name];
            var target = summ(data.toGoal);
            var actual = summ(data.actualSales);
            var diff = 100 - Math.round((actual * 100) / target);
            if (diff < 0) {
              return (
                '<span style="color: #ef6c00"> +' +
                Math.abs(diff) +
                '% </span>'
              );
            }
            return (
              '<span style="color: #1976d2">-' + Math.abs(diff) + '%</span>'
            );
          }

          function summ(arr) {
            var result = 0;
            for (var i = 0; i < arr.length; i++) {
              result += arr[i];
            }
            return result;
          }
        }
      );
    });
  
</script>
</body>
</html>

Bullet Charts in general work alike Gauges, but they were designed in the way they exist to suit dashboards well. Due to their tiny dimensions, we can place a number of Bullets in a dashboard close to each other. They look a bit similar to Bar Charts and can be oriented vertically or horizontally. The main purpose of these charts is to show a value surrounded by some parameters such as ranges and a target value (or values).

This example demonstrates the ACME Corp. sales volumes in 12 regions and how they differ from the target value. The background ranges of a bullet are turned off, so we see only the bullet and the value bar comparing in every chart. These value bars represent the sales volumes and the bullet stands for the target value. Despite we don’t watch the numerical values, we can see the relative difference. All sample is designed as a table, so the first two columns hold the states’ names and the bullet charts, while the third column contains the difference percentage: positive values are colored in orange and negative are blue. Tooltips and labels are disabled for this chart.

Warning!

Horizontal Bullet Chart

Horizontal Bullet Chart