Skip to main content
This site and Lume package is currently under development and may not be stable.
Open Innovations
OI Lume Viz
0.16.5

Chart furniture

Several of our chart visualisations have similar chart furniture such as attribution, axes and legends.

Attribution

Adding an attribution value to any of our visualisation types will add a credit line beneath. This will have the class oi-attribution.

Axes

Our charts may have horizontal (x) or vertical (y) axes each with its own properties. Note that some properties may not be relevant depending on the chart type.

  • axis - An ordered array of series. Each one is of the form:
    • x/y - Properties for the horizontal/vertical axis:
      • title - Properties of the title:
        • label - The text of the title to show.
      • min - The minimum value for the axis
      • max - The maximum value for the axis
      • grid - The properties of the grid:
        • show - (boolean) Do we show the grid lines on this axis?
        • stroke-dasharray - Define a stroke-dasharray for the stroke e.g. "6 2".
        • stroke-width - Define a width for the stroke.
      • tick - Properties of the tick marks
        • spacing - The spacing (in data) between individual ticks.
        • size - The length of the tick marks.
      • ticks - Define an array of tick marks:
        • value - The value of the tick.
        • label - (string) The displayed value of the tick label.
        • grid - (boolean) Do we show the grid line for this tick mark?
        • tickSize - (number) The length of the tick mark.

Legends

Legends are useful for showing colour scales or specific values.

  • legend - Properties that define a chart legend:
    • show - (boolean) Do we show the legend (default false).
    • position - (top/top left/top right/bottom left/bottom right/bottom) Where the legend is placed. If you want to make sure that the legend doesn't overlap the visualisation, you could use top or bottom to place it above or below.
    • items - Define an array of items:
      • value - The value to use to colour the legend item.
      • label - (string) The displayed value of the legend item.
    • continuous Since v0.15.0 - (boolean) To show a continuous colour scale (default false).
    • direction - (horizontal/vertical) The orientation of the scale (default to vertical if position is left or right).
    • size - (string) The width or height of the scale depending on direction (default is 200px).
    • steps - (number) The number of colour steps to use when making a continuous colour scale (default 8).

Legend items that are active will have the class .oi-series-on. If the series isn't active, the legend item will have the class .oi-series-off. If the series is "locked" on (the only one active), it will have the additional class .oi-series.lock.