Vertical Bullet Chart with Pastel theme

Vertical 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>
  <script src="https://cdn.anychart.com/releases/v8/themes/pastel.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 () {
	// set chart theme
anychart.theme('pastel');
      // The data used in this sample can be obtained from the CDN
      // https://cdn.anychart.com/samples/bullet-chart/vertical-bullet-chart/data.js
      anychart.data.loadJsonFile(
        'https://cdn.anychart.com/samples/bullet-chart/vertical-bullet-chart/data.json',
        function (data) {
          var dataSet = data;

          var table = anychart.standalones.table();
          table.hAlign('center');

          table.contents([
            [null],
            [null],
            [
              null,
              createBulletChart('A'),
              createBulletChart('B1'),
              createBulletChart('B2'),
              createBulletChart('B3'),
              createBulletChart('B5'),
              createBulletChart('B6'),
              createBulletChart('B7'),
              createBulletChart('B9'),
              createBulletChart('B12'),
              createBulletChart('C'),
              createBulletChart('D'),
              createBulletChart('E'),
              createBulletChart('K'),
              null
            ],
            [
              null,
              'A',
              'B1',
              'B2',
              'B3',
              'B5',
              'B6',
              'B7',
              'B9',
              'B12',
              'C',
              'D',
              'E',
              'K',
              null
            ],
            [null]
          ]);
          table.getRow(0).height(20);
          table.getRow(1).height(80).cellPadding(10, 0, 20, 0);
          table.getRow(3).height(30);
          table.getRow(2).cellPadding(10, 10, 10, 10);
          table.getRow(4).height(20);
          table
            .getCell(1, 1)
            .colSpan(13)
            .useHtml(true)
            .content(
              'The Content of Vitamins of Corporate Dinners. ACME corp. <br/>' +
              '<span  style="color:#929292; font-size: 13px;">(Actual to Norm)</span>'
            )
            .fontSize(15)
            .vAlign('bottom');
          table.cellBorder(null);

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

          function createBulletChart(name) {
            var data = dataSet[name];
            var target = data.norm;
            var actual = data.actual;
            var bullet = anychart.bullet([
              {
                value: actual,
                type: 'bar',
                gap: 0.7,
                stroke: null
              },
              {
                value: target,
                type: 'line',
                gap: 0.2,
                stroke: { thickness: 2, color: '#545f69' }
              }
            ]);
            bullet
              .background()
              .enabled(true)
              .fill('white')
              .stroke('1 #e5e4e4');
            bullet.padding(20, 0, 10, 0);
            bullet.layout('vertical');
            bullet.axis(null);
            bullet.title(false);

            return bullet;
          }
        }
      );
    });
  
</script>
</body>
</html>

Bullet Charts are small one-series charts which are predominantly used to compare a single measure to some other measures that are intended to enrich the meaning of the first one, and can display its ranges of performance, e.g. “poor”, “satisfactory” and “good” or “low”, “average” and “high”. These charts were developed and designed by Stephen Few; they are inspired by thermometer charts and progress bars, which can be found in many dashboards.

This example is a table with 14 bullets, each showing the actual amount of vitamins (bars) and its normal daily intake (bullets). Vitamin names are written under the bullets. These Charts have no tooltips. Due to specific of this particular sample, ranges are disabled, so we can see only the ratio between the actual and the target values.

Warning!

Vertical Bullet Chart

Vertical Bullet Chart