Axes

Overview

The axes property provides comprehensive control over chart axes. Configure labels, ranges, scales and visibility for x, y and secondary y axes.

const config: GraphConfig = {
  axes: {
    x: {
      label: 'Month',
    },
    y: {
      label: 'Revenue (£)',
      min: 0,
    },
  },
};

Axes configuration only applies to chart types that support axes (line, bar, column, combo, scatter, etc.). Pie and donut charts don’t use axes.

X-axis

The x-axis typically represents the independent variable (categories, time periods or continuous values).

Label

string

Custom label for the x-axis. Displayed below the axis.

axes: {
  x: {
    label: 'Quarter';
  }
}

Visibility

boolean

Whether to hide the x-axis. When true, the axis line, ticks and labels are hidden. The axis label is also hidden.

axes: {
  x: {
    isHidden: true;
  }
}

Orientation

boolean

Flip the x-axis position (top↔bottom).

axes: {
  x: {
    isReversed: true; // Move x-axis to opposite side
  }
}

Numeric x-axis options

When the x-axis contains numeric values (not categories), additional options are available:

'linear' | 'logarithmic'

default:"linear"

Scale type for numeric x-axes. Use 'logarithmic' for data that spans several orders of magnitude.

number

Minimum value for the x-axis. If not set, automatically calculated from the data.

number

Maximum value for the x-axis. If not set, automatically calculated from the data.

'auto' | 'edges'

default:"auto"

How to display ticks on numeric x-axes: - 'auto' - Display all ticks - 'edges' - Display only the first and last ticks

axes: {
  x: {
    scaleType: 'linear',
    min: 0,
    max: 100,
    tickDisplayMode: 'auto'
  }
}

Y-axis

The y-axis typically represents the dependent variable (measurements, values, quantities).

Label

string

Custom label for the y-axis. Displayed beside the axis.

axes: {
  y: {
    label: 'Sales (£000s)';
  }
}

Visibility

boolean

Whether to hide the y-axis. When true, the axis line, ticks and labels are hidden. The axis label is also hidden.

axes: {
  y: {
    isHidden: true;
  }
}

Orientation

boolean

Flip the y-axis position (left↔right).

axes: {
  y: {
    isReversed: true; // Move y-axis to opposite side
  }
}

Scale type

'linear' | 'logarithmic'

default:"linear"

Scale type for the y-axis: - 'linear' - Standard linear scale with evenly spaced ticks - 'logarithmic' - Logarithmic scale, useful for data spanning multiple orders of magnitude

axes: {
  y: {
    scaleType: 'logarithmic'; // Better for data like: 1, 10, 100, 1000
  }
}

Range

number

Minimum value for the y-axis. If not set, automatically calculated from the data. Setting this to 0 is common to ensure bars start from zero.

number

Maximum value for the y-axis. If not set, automatically calculated from the data.

axes: {
  y: {
    min: 0,      // Start at zero
    max: 10000   // Cap at 10,000
  }
}

Tick display

'auto' | 'edges'

default:"auto"

How to display ticks on the y-axis: - 'auto' - Display all ticks at appropriate intervals - 'edges' - Display only the minimum and maximum values

axes: {
  y: {
    tickDisplayMode: 'edges'; // Show only min and max
  }
}

Secondary y-axis (y2)

Combo charts can display two y-axes to accommodate series with different scales or units.

Label

string

Custom label for the secondary y-axis. Only used when dual y-axes are enabled.

const config: GraphConfig = {
  type: 'combo',
  axes: {
    y: {
      label: 'Revenue (£)',
    },
    y2: {
      label: 'Units sold',
    },
    hasDualYAxis: true,
  },
};

The secondary y-axis (y2) only supports the label property. Other axis options (min, max, scale) are not configurable for y2.

Dual y-axis mode

boolean

default:"true"

Whether to show two y-axes on a combo chart. When true, the primary y-axis appears on the left and the secondary on the right (or reversed if isReversed is set).

const config: GraphConfig = {
  type: 'combo',
  axes: {
    hasDualYAxis: true, // Show both y-axes
  },
};

When hasDualYAxis is false, all series share a single y-axis.

Swapping y-axes

For combo charts with dual y-axes, use isReversed to swap the positions:

axes: {
  y: {
    label: 'Revenue (£)',
    isReversed: true  // Move primary y-axis to the right
  },
  y2: {
    label: 'Units sold'  // This will now appear on the left
  },
  hasDualYAxis: true
}

Grid lines

boolean

Whether to show horizontal grid lines across the chart.

axes: {
  showGridLines: true; // Show horizontal grid lines
}

Complete example

const config: GraphConfig = {
  type: 'line',
  data: {
    /* ... */
  },
  axes: {
    x: {
      label: 'Date',
      isHidden: false,
    },
    y: {
      label: 'Revenue (£)',
      min: 0,
      max: 50000,
      scaleType: 'linear',
      tickDisplayMode: 'auto',
      isHidden: false,
      isReversed: false,
    },
    showGridLines: true,
  },
};

Combo chart example

const config: GraphConfig = {
  type: 'combo',
  data: {
    /* ... */
  },
  axes: {
    y: {
      label: 'Revenue (£)',
      min: 0,
    },
    y2: {
      label: 'Units sold',
    },
    hasDualYAxis: true,
    showGridLines: true,
  },
};

Get Started

Graph types

Customisation

Configuration

Editor

Advanced

Reference

Overview

X-axis

Label

Visibility

Orientation

Numeric x-axis options

Y-axis

Label

Visibility

Orientation

Scale type

Range

Tick display

Secondary y-axis (y2)

Label

Dual y-axis mode

Swapping y-axes

Grid lines

Complete example

Combo chart example

​Overview

​X-axis

​Label

​Visibility

​Orientation

​Numeric x-axis options

​Y-axis

​Label

​Visibility

​Orientation

​Scale type

​Range

​Tick display

​Secondary y-axis (y2)

​Label

​Dual y-axis mode

​Swapping y-axes

​Grid lines

​Complete example

​Combo chart example

Overview

X-axis

Label

Visibility

Orientation

Numeric x-axis options

Y-axis

Label

Visibility

Orientation

Scale type

Range

Tick display

Secondary y-axis (y2)

Label

Dual y-axis mode

Swapping y-axes

Grid lines

Complete example

Combo chart example