Skip to main content

​
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

​
axes.x.label
string
Custom label for the x-axis. Displayed below the axis.
axes: {
  x: {
    label: 'Quarter'
  }
}

​
Visibility

​
axes.x.isHidden
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

​
axes.x.isReversed
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:
​
axes.x.scaleType
'linear' | 'logarithmic'
default:"linear"
Scale type for numeric x-axes. Use 'logarithmic' for data that spans several orders of magnitude.
​
axes.x.min
number
Minimum value for the x-axis. If not set, automatically calculated from the data.
​
axes.x.max
number
Maximum value for the x-axis. If not set, automatically calculated from the data.
​
axes.x.tickDisplayMode
'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

​
axes.y.label
string
Custom label for the y-axis. Displayed beside the axis.
axes: {
  y: {
    label: 'Sales (£000s)'
  }
}

​
Visibility

​
axes.y.isHidden
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

​
axes.y.isReversed
boolean
Flip the y-axis position (left↔right).
axes: {
  y: {
    isReversed: true  // Move y-axis to opposite side
  }
}

​
Scale type

​
axes.y.scaleType
'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

​
axes.y.min
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.
​
axes.y.max
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

​
axes.y.tickDisplayMode
'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

​
axes.y2.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

​
axes.hasDualYAxis
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

​
axes.showGridLines
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
  }
};