html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // 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;

      }

    }

  );

});