Axis Scales

Axis ranges, scales, and related details.

Scale Types

The axis scale can be set through the axis.scale.type property using one of the options defined by scale.

• Auto
  Automatically Determined.
• Time
  When set, values can be specified as strings, numbers, or date objects..
• Logarithmic
  Logarithmic scale.
• Stacked
  Stacks data points.
• StackedLogarithmic
  Stacks data points on a logarithmic scale.
• StackedFull
  Stacks points on a percentage scale ranging from 0 to 100%

Scales & Chart Types

Axis scales are related to chart types because some scale types are used to define options often associated with chart types like stacked columns. Column is a series type, but stacked is a value (Y) axis scale type.

Bars are stacked on the position (X) axis by default. This basically means they are drawn side by side. Setting the value (Y) axis scale to stacked, stacks bars vertically. If the tertiary (Z) axis scale type is set to stacked, they are arranged one in front of the other. This is useful for cases such as gantt.

Scales & Data

There are 3 fundamental types of data and scales.

• Numeric
• Time
• Category

Numeric scales are common and the default behavior when datapoint x, and y properties are set with numeric values.

Time scales require the axis scale types to be set to 'time' or use date objects for point values. When a scale type is time, the respective data point property numbers are converted to dates, and string date values are parsed by Date().

The position (X) axis supports numbers, time, and category values. A smart category pattern matching algorithm allows series with missing category points to be reconstructed back to the original category order if sufficient category data is available across all series.

Intervals

Tick intervals are automatically chosen by default but they can also be specified manually.

On numeric scales, intervals are specified using a numeric value. On time scales, the intervals can be set using a number representing a time span in milliseconds, or a time span object configuration. The object configuration makes it more readable and simpler to define a time span rather than calculating the milliseconds. Intervals are specified through the interval and minorInterval properties.

This is a snippet and sample demonstrating time span object intervals.

{
  xAxis: {
    scale: {
      interval: {
        /* One week interval.*/
        unit: "week",
        multiplier: 1
      },
      minorInterval: {
        /* Two days interval. */
        unit: "day",
        multiplier: 2
      }
    }
  }
}

Scale Ranges

While data points determine the visible axis ranges, there are a number of scenarios and properties that affect this range. For instance, in some scenarios the axis start and end snap to axis ticks.

When column series are used, the axis snaps to 0 unless positive and negative columns are used.

The axis range min and max values can be set manually through the range property. When one of these are set, the axis does not attempt to snap to tick positions.

{
  xAxis: {
    scale: {
      /*Define an axis range of 0-100*/
      range: [0, 100]
    }
  }
}

Range properties can also be set with an object that includes more options and the ability to specify only the min or only the max range value.

The scale can be padded by setting the scale.range.padding property with a value between 0-1 indicating the percentage of the scale range to pad.

{
  xAxis: {
    scale: {
      /*Define an axis range of 0-100*/
      range: { min: 0, max: 100, padding: 0.1 }
    }
  }
}

Scale Breaks

Scale breaks are discontinuities in an axis' scale. They are useful when there is a large difference between low and high data point values. By removing parts of an axis range, the variations between other data points is more pronounced. The chart is able to determine whether scale breaks can improve the readability of plotted data automatically if the axis.scale.breaks.limit is set with an integer (count) value of 1 or more. This indicates how many scale breaks the chart can utilize automatically. Scale breaks can also be specified manually with start and end values.

This code snippet specifies breaking the axis between 5-10 and between 12-20.

{
  scale: { breaks: [[5, 10], [12, 20]] }
}