Axes

Using axes in nivo components

Axes are built on top of d3 scales. A lot of nivo components make use of it (Bar, Line, ScatterPlot…).

Axis position

Axis position is determined by the property you use (top|right|bottom|left)Axis.

01020304050607080axisTop05101520253035axisRight01020304050607080axisBottom05101520253035axisLeft

Axis ticks

Axes are composed of ticks, you can control the way they are computed and their aspect. By default, computing which ticks are displayed is managed by the corresponding d3 scale.

Ticks values

You can use the tickValues property in order to customize the displayed ticks, it accepts several forms:

  • an array of values, which should be numbers for a linear scale, values being part of the dataset for point scales, or dates for time scales.
  • a number which define the number of ticks to display, doesn't work with point scale, also note that when using this form it's not guaranteed that you'll have exactly the number of ticks you asked for as d3 will make an educated guess to define them.
  • a time interval, for example every day or every 15 minutes, only works when using time scales.
ACEGIpoint scale ['A', 'C', 'E', 'G', 'I']020406080linear scale [0, 20, 40, 60, 80]2019/012019/072020/01time scale with three dates09:0009:1509:3009:4510:00time scale, every 15 minutes020406080linear scale, tickValues: 52019/012019/042019/072019/102020/01time scale, tickValues: 5

Axis legend

You can optionally add a legend to an axis by setting the value of the legend property.

Legend position

Legend position is controlled by two properties, legendPosition and legendOffset.legendPosition must be one of: start, middle or end, legendOffset will affect y position for top and bottom axes and x position for left and right axes.

01020304050607080start01020304050607080middle01020304050607080end05101520253035start05101520253035middle05101520253035end