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 axismax
- The maximum value for the axisgrid
- 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 marksspacing
- 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 usetop
orbottom
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 tovertical
ifposition
isleft
orright
).size
- (string) The width or height of the scale depending ondirection
(default is200px
).steps
- (number) The number of colour steps to use when making a continuous colour scale (default8
).
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
.