BulletChart

A bullet chart based on the description by Perceptual Edge. The visualization takes a numeric value and plots it on a one-dimensional plot against comparison markers and background color ranges.

Example

JavaScript

<body>
<script src="//unpkg.com/candela"></script>
<script>
  var el = document.createElement('div')
  document.body.appendChild(el);

  var vis = new candela.components.BulletChart(el, {
    value: 0.8,
    title: 'My measurement',
    subtitle: '... it is really important',
    ranges: [
      { min: 0, max: 0.2, foreground: 'gray', background: 'red' },
      { min: 0.2, max: 0.7, foreground: 'gray', background: 'yellow' },
      { min: 0.7, max: 1, foreground: 'gray', background: 'green' }
    ],
    width: 700,
    height: 100
  });
  vis.render();
</script>
</body>

Python

import pycandela

pycandela.components.BulletChart(
    value=0.8,
    title='My measurement',
    subtitle='... it is really important',
    ranges=[
        dict(min=0, max=0.2, foreground='gray', background='red'),
        dict(min=0.2, max=0.7, foreground='gray', background='yellow'),
        dict(min=0.7, max=1, foreground='gray', background='green')
    ],
    width=700,
    height=100
)

R

library(candela)

candela('BulletChart',
  value=0.8,
  title='My measurement',
  subtitle='... it is really important',
  ranges=data.frame(
    min=c(0, .2, .7), max=c(.2, .7, 1),
    foreground=c('gray', 'gray', 'gray'),
    background=c('red', 'yellow', 'green')),
  width=700,
  height=100
)

Options

value (Number)
The value to plot in the bullet chart.
title (String)
The title to show to the left of the chart.
subtitle (String)
An optional subtitle to display below the title.
markers (Array of Number)
Comparative markers to display as vertical lines.
ranges (Array of Range)
Background ranges to display under the chart.
width (Number)
Width of the chart in pixels. See Sizing.
height (Number)
Height of the chart in pixels. See Sizing.
renderer (String)
Whether to render in "svg" or "canvas" mode (default "canvas").

Range specification

A range represents a visual range of an axis with background and foreground colors. It consists of an object with the following fields:

min (Number)
The minimum value of the range.
max (Number)
The maximum value of the range.
background (String)
The background color of the range.
foreground (String)
The color of values and markers that fall in this range (default: "black").