What is Axis domain and scale? And the Solar system example

This guide will explain the concept of axis domain and scale in Recharts. It shows examples of categorical and numerical axes, and custom ticks formatting.

Axis domain is a fancy way of saying “your data start here and end there”.

Let's show it on an example. Let's say if your chart is representing all planets in their solar system and their orbital distance from the Sun.

Let's put the data in an array and show on a chart. Now the result is somewhat unsatisfactory:

There are a few things we can observe. First, the XAxis domain is by default categorical and YAxis is numerical. What does it mean?

Category axis

Categorical axis means that it treats its values as strings. It doesn't attempt to get values “in the middle” and indeed this is the correct behavior for our chart - it doesn't make sense to show bars for “Mercury and a half“.

Recharts calls this “category”, other sources will call it “discrete” and “ordinal” - it all means the same for our chart.

Number axis

Numerical axis treats its data as a continuous spectrum. You can see this on the Y Axis - Recharts took the liberty to put ticks on “1e30” even though there is no such record in the data anywhere. You will also notice the ticks go beyond of what's in the data. The maximum mass in Solar system is the Sun - with a mass of 1.989e30 kilogram, and yet Recharts put a tick on 2e30. This is the default, or auto behaviour - Recharts will try to make a guess and make the axis ticks to look “nice”. This may or may not be what you want - more on this below in the “Domain” section.

Okay so we have a chart that is highly unsatisfactory. All we can see is the Sun mass and nothing else. Technically the data is there and you can mouse over it and see it in the tooltip, but the bars are less than 1px tall and so are invisible. What can we do about it? Let's explore what options are there.

Switching between axis type

First, Recharts has default types but we can change then. If you switch the XAxis to type='number', nothing shows up because the data is not numerical (“Saturn” doesn't convert to a number) and so there is nothing to display.

If you switch YAxis to type='category' you get a different chart:

It shows more stuff! Notice how the YAxis changed - it now treats every number as a literal value, independent of others. Ticks are not sorted, and not rounded. Sun is not visible because its bar has zero height - the tick for 1.989e30 is first at the bottom, where the bars begin.

This may be what you want but Recharts can do better. Enter: custom domains.

Custom domain

Recharts allows you to provide a custom domain, that is: you can tell the axis where it should start and where it should end.

Let's start by adding a domain prop like this: <YAxis domain={[1e23, 1e25]} />. You will see that nothing has changed! (Apart from some labels formatting.) That's because by default, Recharts will expand the domain so that it fits all the data.

We can turn that off by setting allowDataOverflow to true, like this: <YAxis domain={[1e23, 1e25]} allowDataOverflow />.

What this does is it will cut off the Sun bar (as it's “off the chart”) and it will allow us to see the individual planets mass.

Still the rocky planets are way too small to be seen. What else can we do?

Custom scale

The default scale is linear scale. It's easy to read but it doesn't allow comparing very small and very large values. Logarithmic scale is better for that purpose (but it does require the reader to be careful).

Recharts allows to set a custom scale using the scale prop:

Note that the log scale has a bug where it requires one to set an explicit domain.

Recharts will also allow to set a scale as a function using one of the d3-scales: https://d3js.org/d3-scale

Ticks formatting

Now you might or might not prefer the scientific number notation. Recharts will allow you to customize the ticks too using tickFormatter. Let's convert the values to “yottagrams” like this: