Charts - Axis

Axis provides associate values to element positions.

Axes are used in the following charts: <LineChart />, <BarChart />, <ScatterChart />.

Defining axis

Like your data, axis definition plays a central role in the chart rendering. It's responsible for the mapping between your data and element positions.

You can define custom axes by using xAxis and yAxis props. Those props expect an array of objects.

Here is a demonstration with two lines with the same data. But one uses a linear, and the other a log axis. Each axis definition is identified by its property id. Then each series specifies the axis they use with the xAxisId and yAxisId properties.

Axis type

The axis type is specified by its property scaleType which expect one of the following values:

• 'band': Split the axis in equal band. Mostly used for bar charts.
• 'point': Split the axis in equally spaced points. Mostly used for line charts on categories.
• 'linear', 'log', 'sqrt': Map numerical values to the space available for the chart. 'linear' is the default behavior.
• 'time', 'utc': Map JavaScript Date() object to the space available for the chart.

Axis data

The axis definition object also includes a data property. Which expects an array of value coherent with the scaleType:

• For 'linear', 'log', or 'sqrt' it should contain numerical values
• For 'time' or 'utc' it should contain Date() objects
• For 'band' or 'point' it can contain string, or numerical values

Some series types also require specific axis attributes:

• line plots require an xAxis to have data provided
• bar plots require an xAxis with scaleType="band" and some data provided.

Axis formatter

Axis data can be displayed in the axes ticks and the tooltip. To modify how data is displayed use the valueFormatter property.

The second argument of valueFormatter provides some rendering context for advanced use cases.

In the next demo, valueFormatter is used to shorten months and introduce a breaking space for ticks only. To distinguish tick and tooltip, it uses the context.location.

Using the D3 formatter

The context gives you access to the axis scale. The D3 tickFormat(tickNumber, scpecifier) method can be interesting to adapt ticks format based on the scale properties.

Axis sub domain

By default, the axis domain is computed such that all your data is visible. To show a specific range of values, you can provide properties min and/or max to the axis definition.

xAxis={[
  {
    min: 10,
    max: 50,
  },
]}

Relative axis subdomain

You can adjust the axis range relatively to its data by using the domainLimit option. It can take 3 different values:

• "nice" Rounds the domain at human friendly values. It's the default behavior.
• "strict" Sets the domain to the min/max value to display.
• (minValue, maxValue) => { min, max } Receives the calculated extremums as parameters, and should return the axis domain.

The demo below shows different ways to set the y-axis range. They always display the same data, going from -15 to 92, but with different domainLimit settings.

Axis direction

By default, the axes' directions are left to right and bottom to top. You can change this behavior with the property reverse.

Grid

You can add a grid in the background of the cartesian chart with the grid prop.

It accepts an object with vertical and horizontal properties. Setting those properties to true will display the grid lines.

If you use composition you can pass those properties to the <ChartsGrid /> component.

<BarChart grid={{ vertical: true }}>

<ChartContainer>
  <ChartsGrid vertical >
</ChartContainer>

Tick position

Automatic tick position

You can customize the number of ticks with the property tickNumber.

As a helper, you can also provide tickMinStep and tickMaxStep which will compute tickNumber such that the step between two ticks respect those min/max values.

Here the top axis has a tickMinStep of half a day, and the bottom axis a tickMinStep of a full day.

Fixed tick positions

If you want more control over the tick position, you can use the tickInterval property.

This property accepts an array of values. Ticks will be placed at those values.

For axis with scale type 'point', the tickInterval property can be a filtering function of the type (value, index) => boolean.

In the next demo, both axes are with scaleType='point'. The top axis displays the default behavior. It shows a tick for each point. The bottom axis uses a filtering function to only display a tick at the beginning of a day.

Filtering ticks label

You can display labels only on a subset of ticks with the tickLabelInterval property. It's a filtering function in the (value, index) => boolean form.

For example tickLabelInterval: (value, index) => index % 2 === 0 will show the label every two ticks.

By default, ticks are filtered such that their labels do not overlap. You can override this behavior with tickLabelInterval: () => true which forces showing the tick label for each tick.

In this example, the top axis is a reference for the default behavior. Notice that tick labels do not overflow.

At the bottom, you can see one tick for the beginning and the middle of the day but the tick label is only displayed for the beginning of the day.

Position

The axis position can be customized with the position property of the axis configuration. Its value can be:

• 'top' or 'bottom' for the x-axis.
• 'left' or 'right' for the y-axis.
• 'none' to hide the axis.

Hiding axis

To hide an axis, set its position to 'none'. The axis is still computed and used for the scaling.

Multiple axes on the same side

You can display multiple axes on the same side. If two or more axes share the same position, they are displayed in the order they are defined from closest to the chart to farthest.

To avoid overlapping, you can use the height prop for xAxis and width for yAxis to increase the space between the axes.

Axis customization

You can further customize the axis rendering besides the axis definition.

Fixing overflow issues

If your tick labels are too long, they can either overflow the SVG or overlap with the axis label. You can resolve this by increasing the size of the overflowing axis.

In the following demo, the size of the x- and y-axes is modified to increase the space available for tick labels.

Rendering

Axes rendering can be further customized. Below is an interactive demonstration of the axis props.

Text customization

To customize the text elements (ticks label and the axis label) use the tickLabelStyle and labelStyle properties of the axis configuration.

When not set, the default values for the properties textAnchor and dominantBaseline depend on the value of the angle property. You can test below how the value of angle influences them.

Composition

If you are using composition, you have to provide the axis settings in the <ChartContainer /> by using xAxis and yAxis props.

It will provide all the scaling properties to its children, and allows you to use <XAxis/> and <YAxis/> components as children. Those components require an axisId prop to link them to an axis you defined in the <ChartContainer />.

You can choose their position with position props which accept 'top'/'bottom' for <XAxis /> and 'left'/'right' for <YAxis />. Other props are similar to the ones defined in the previous section.

Reference line

The <ChartsReferenceLine /> component add a reference line to the charts. You can provide an x or y prop to get a vertical or horizontal line respectively at this value.

You can add a label to this reference line. It can be placed with labelAlign prop which accepts 'start', 'middle', and 'end' values. Elements can be styled with lineStyle and labelStyle props.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <ChartsAxis />
• <ChartsReferenceLine />
• <ChartsReferenceLine />
• <ChartsText />
• <ChartsXAxis />
• <ChartsYAxis />