Skip to main content

Axis Sizing

There are two properties on an axis that allow to manually set its size:

  • axisThickness - The size of the axis perpendicular to its main direction (space occupied by labels, ticks, and title).
  • axisLength - The size of the axis along its main direction (the direction the axis runs).

Axis Thickness​

The default axis layout reserves a minimal required area to fit an axis and recalculates it on each frame to adjust for possible size changes to labels, paddings, borders, etc...

Most common example of that is when zooming a vertical axis the number of digits in axis label values increases (or decreases) causing the label text width and as a result axis thickness.

But, if you want to changes this behavior and know the limit of max axis thickness, you could set it to a static value.
This will prevent axis resize jitter when zooming or scrolling.

note

However, note that if the labels require more space then the set axisThickness, the axis size still would be adjusted by increasing by required value.

// axes with the default layout
const xAxis1 = new NumericAxis(wasmContext, {
    id: "xAxis1",
    axisTitle: "xAxis1",
    axisBorder: { border: 1, color: "green" }
});
const yAxis1 = new NumericAxis(wasmContext, {
    id: "yAxis1",
    axisTitle: "yAxis1",
    axisBorder: { border: 1, color: "yellow" }
});

// axes with custom thickness
const xAxis2 = new NumericAxis(wasmContext, {
    id: "xAxis2",
    axisTitle: "xAxis2",
    axisBorder: { border: 1, color: "blue" },
    axisThickness: 100
});
const yAxis2 = new NumericAxis(wasmContext, {
    id: "yAxis2",
    axisTitle: "yAxis2",
    axisBorder: { border: 1, color: "red" },
    axisThickness: 100
});

Axis Length​

The axis length can depend on size of other axes (available horizontal size depends on vertical axis thickness and vice vers), and also can be modified by a layout strategy (for example Vertically Stacked Axis Layout or Horizontally Stacked Axis Layout)

If you need to customize this layout behavior, you could set a custom axis length value during rendering.
More commonly it could be used in custom Axis Layout Strategies.

note

Unlike axisThickness, axisLength do not override the default behavior of axis layout. So in order for it to take effect you need to ensure your custom value is being set during the rendering process after the layout phase. For example, use layoutMeasured EventHandler