@hpcc-js/Visualization

Bullet

The Bullet chart displays a title and subtitle along with three types of values to the right. Each row's values are placed relative to the other values in that row. Their placement is unaffected by the values in other rows.

<div id="placeholder" style="height:400px">
</div>
<script type="module">
  import { Bullet } from "@hpcc-js/chart";

  new Bullet()
      .target("placeholder")
      .columns(["title", "subtitle", "measures"])
      .data([
          ["Revenue", "US$, in thousands", [220, 270, 345]],
          ["Profit  ", "%", [21, 23]],
          ["Order Size", "US$, average", [100, 320, 432]],
          ["New Customers", "count", [1000, 1650, 1943]],
          ["Satisfaction", "out of 5", [3.2, 4.7, 4.9]]
      ])
      .titleColumn("title")
      .subtitleColumn("subtitle")
      .measuresColumn("measures")
      .render()
      ;
</script>

In this example "markers" have been added.

<div id="placeholder" style="height:400px">
</div>
<script type="module">
  import { Bullet } from "@hpcc-js/chart";

  new Bullet()
      .target("placeholder")
      .columns(["title", "subtitle", "measures", "markers"])
      .data([
          ["Revenue", "US$, in thousands", [220, 270], [250, 25]],
          ["Profit  ", "%", [21, 23], [26]],
          ["Order Size", "US$, average", [100, 320], [150, 550]],
          ["New Customers", "count", [1000, 1650], [190, 540, 750, 850, 2100]],
          ["Satisfaction", "out of 5", [3.2, 4.7], [4.4]]
      ])
      .titleColumn("title")
      .subtitleColumn("subtitle")
      .measuresColumn("measures")
      .markersColumn("markers")
      .render()
      ;
</script>

In this example "ranges" have been added.

<div id="placeholder" style="height:400px">
</div>
<script type="module">
  import { Bullet } from "@hpcc-js/chart";

  new Bullet()
      .target("placeholder")
      .columns(["title", "subtitle", "ranges", "measures", "markers"])
      .data([
          ["Revenue", "US$, in thousands", [150, 225, 300], [220, 270], [250, 25]],
          ["Profit  ", "%", [20, 25, 30], [21, 23], [26]],
          ["Order Size", "US$, average", [350, 500, 600], [100, 320], [550]],
          ["New Customers", "count", [1400, 2000, 2500], [1000, 1650], 2100],
          ["Satisfaction", "out of 5", [3.5, 4.25, 5], [3.2, 4.7], [4.4]]
      ])
      .titleColumn("title")
      .subtitleColumn("subtitle")
      .rangesColumn("ranges")
      .measuresColumn("measures")
      .markersColumn("markers")
      .render()
      ;
</script>

API

Published Properties