The horizontal (X) and vertical (Y) lines in cartesian charts are referred to as chart axes, and they serve to illustrate
the relationships between data points on the graph. This section discusses the different axis types.
Category
A category axis is used to display distinct categories or groups of data in a chart.
The category axis shows discrete categories or groups of data, unlike the Number or
Time axes which use a continuous scale. For instance, in a bar chart of sales per product, the
category axis shows the products as different groups, and the number axis displays the corresponding sale value for each group.
If no axes
are supplied, a category axis will be used as the x-axis by default. However, it can also
be explicitly configured as shown below:
axes: [
{
type: 'category',
position: 'bottom',
},
]
Number
A number axis is used to display continuous numerical values in a chart.
The number axis displays continuous numerical values, unlike the Category axis which displays
discrete categories or groups of data. This means that while categories are spaced out evenly, the distance between values
in a number axis will depend on their magnitude.
Instead of using one Axis Tick per value, the number axis will determine the range of all values,
round it up and try to segment the rounded range with evenly spaced ticks.
If no axes
are supplied, a number axis will be used as the y-axis by default. However, it can also be explicitly
configured as shown below:
axes: [
{
type: 'number',
position: 'left',
},
]
Time
The time axis is similar to the number axis in the sense that it is also used to plot continuous values. The time axis
can even be used with numeric data (in addition to Date
objects), but the numbers will be interpreted as Unix timestamps.
The time axis differs from the number axis in tick segmentation and label formatting. For example, you could choose to
place a tick every 5 minutes, every month, or every Friday.
The time axis also supports specifier strings to control the way time values are presented as labels. For example,
the %H:%M:%S
specifier string will instruct the axis to format a time value like new Date('Mon Apr 17 2023 12:43:17')
or 1681735397
as '12:43:17'
. Time axes are typically used as x-axes and placed at the bottom of a chart. The
simplest time axis config looks like this:
{
type: 'time',
position: 'bottom'
}
Log
If the range of values is very wide, the log
axis can be used instead of the number
axis.
For example, because the number
axis uses a linear scale, same changes in magnitude result in the
same pixel distance.
The log
axis uses a log scale, where same percentage changes in magnitude result in the same pixel distance.
In other words, the pixel distance between 10 and 100, and 100 and 1000 will be the same because both ranges
represent the same percentage increase. Whereas, if the number
axis was used, the second distance would be
10 times larger than the first.
The above property of the log axis can also be useful in financial charts. For example, if your rate of
return on an investment stays consistent over time, the investment value chart will look like a straight line.
By default, if the data domain has 5
or more orders of magnitude, the log
axis attempts to render 5
ticks. Otherwise,
10
ticks (the logarithm base) is rendered per order of magnitude. For example a data domain of [1, 100]
with 2
orders
of magnitude, will show 1
, 2
, 3
, 4
,5
, 6
, 7
, 8
, 9
, 10
, 20
, 30
, 40
, 50
, 60
, 70
, 80
, 90
, 100
.
Depending on the data domain and chart size, using a larger value for the tick: { minSpacing: xxx }
config might be
necessary to reduce the number of ticks.
{
type: 'log',
position: 'left',
tick: {
minSpacing: 200,
}
}
The log
axis uses the common logarithm (base 10) by default. The base
config allows
you to change the base to any number you like, for example Math.E
for natural or 2
for binary logarithms:
{
type: 'log',
position: 'left',
base: 2
}
These configurations above are demonstrated in the following example:
The domain of a log axis should be strictly positive or strictly negative (because there's no power you can raise a number to that will yield zero). For that reason, any non-conforming domain will be clipped to conformity. For example, [0, 10]
will be clipped to [1, 10]
. If the data domain crosses 0
, for example [-10, 5]
, no data will be rendered. It is often desirable to set the min
or max
property of the axis manually. In this case it can be max: -1
.
API Reference
Category Axis Options
| 'category' | 'category' |
| Ratio | The size of the gap between the categories as a proportion, between 0 and 1. This value is a fraction of the “step”, which is the interval between the start of a band and the start of the next band. Default: 0.2
paddingInner: Ratio;
type Ratio = number
|
| Ratio | The padding on the outside i.e. left and right of the first and last category. In association with paddingInner , this value can be between 0 and 1. Default: 0.3
paddingOuter: Ratio;
type Ratio = number
|
| Ratio | This property is for grouped column/bar series plotted on a category axis. It is a proportion between 0 and 1 which determines the size of the gap between the bars or columns within a single group along the axis. Default: 0.2
groupPaddingInner: Ratio;
type Ratio = number
|
| AgAxisCategoryTickOptions | Configuration for the axis ticks. tick: AgAxisCategoryTickOptions;
interface AgAxisCategoryTickOptions {
// The width in pixels of the axis ticks (and corresponding grid line).
width?: PixelSize;
// The length in pixels of the axis ticks.
size?: PixelSize;
// The colour of the axis ticks.
color?: CssColor;
// Array of values in axis units to display as ticks along the axis.
// The values in this array must be compatible with the axis type.
values?: any[];
// Minimum gap in pixels between tick lines.
minSpacing?: number;
// Maximum gap in pixels between tick lines.
maxSpacing?: number;
}
type PixelSize = number
type CssColor = string
|
| AgCartesianAxisPosition | The position on the chart where the axis should be rendered. position: AgCartesianAxisPosition;
type AgCartesianAxisPosition =
'top'
| 'right'
| 'bottom'
| 'left'
|
| AgAxisCaptionOptions | Configuration for the title shown next to the axis. title: AgAxisCaptionOptions;
interface AgAxisCaptionOptions {
// Whether or not the title should be shown.
enabled?: boolean;
// The text to show in the title.
text?: string;
// The font style to use for the title.
fontStyle?: FontStyle;
// The font weight to use for the title.
fontWeight?: FontWeight;
// The font size in pixels to use for the title.
fontSize?: FontSize;
// The font family to use for the title.
fontFamily?: FontFamily;
// The colour to use for the title.
color?: CssColor;
}
type FontStyle =
'normal'
| 'italic'
| 'oblique'
type FontWeight =
'normal'
| 'bold'
| 'bolder'
| 'lighter'
| '100'
| '200'
| '300'
| '400'
| '500'
| '600'
| '700'
| '800'
| '900'
type FontSize = number
type FontFamily = string
type CssColor = string
|
| AgAxisLineOptions | Configuration for the axis line. line: AgAxisLineOptions;
interface AgAxisLineOptions {
// The width in pixels of the axis line.
width?: PixelSize;
// The colour of the axis line.
color?: CssColor;
}
type PixelSize = number
type CssColor = string
|
| AgAxisLabelOptions | Configuration for the axis labels, shown next to the ticks. label: AgAxisLabelOptions;
interface AgAxisLabelOptions {
// The font style to use for the labels.
fontStyle?: FontStyle;
// The font weight to use for the labels.
fontWeight?: FontWeight;
// The font size in pixels to use for the labels.
fontSize?: FontSize;
// The font family to use for the labels
fontFamily?: FontFamily;
// Padding in pixels between the axis label and the tick.
padding?: PixelSize;
// The colour to use for the labels
color?: CssColor;
// The rotation of the axis labels in degrees. Note: for integrated charts the default is 335 degrees, unless the axis shows grouped or default categories (indexes). The first row of labels in a grouped category axis is rotated perpendicular to the axis line.
rotation?: number;
// If specified and axis labels may collide, they are rotated so that they are positioned at the supplied angle. This is enabled by default for category. If the `rotation` property is specified, it takes precedence.
autoRotate?: boolean;
// If autoRotate is enabled, specifies the rotation angle to use when autoRotate is activated. Defaults to an angle of 335 degrees if unspecified.
autoRotateAngle?: number;
// Avoid axis label collision by automatically reducing the number of ticks displayed. If set to `false`, axis labels may collide.
avoidCollisions?: boolean;
// Minimum gap in pixels between the axis labels before being removed to avoid collisions.
minSpacing?: PixelSize;
// Format string used when rendering labels.
format?: string;
// Function used to render axis labels. If `value` is a number, `fractionDigits` will also be provided, which indicates the number of fractional digits used in the step between ticks; for example, a tick step of `0.0005` would have `fractionDigits` set to `4`
formatter?: (params: AgAxisLabelFormatterParams) => string | undefined;
}
type FontStyle =
'normal'
| 'italic'
| 'oblique'
type FontWeight =
'normal'
| 'bold'
| 'bolder'
| 'lighter'
| '100'
| '200'
| '300'
| '400'
| '500'
| '600'
| '700'
| '800'
| '900'
type FontSize = number
type FontFamily = string
type PixelSize = number
type CssColor = string
interface AgAxisLabelFormatterParams {
value: any;
index: number;
fractionDigits?: number;
formatter?: (x: any) => string;
}
|
| AgAxisGridStyle[] | Configuration of the lines used to form the grid in the chart area. gridStyle: AgAxisGridStyle[];
interface AgAxisGridStyle {
// The colour of the grid line.
stroke?: CssColor;
// Defines how the gridlines are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels.
lineDash?: PixelSize[];
}
type CssColor = string
type PixelSize = number
|
| AgCrossLineOptions[] | Add cross lines or regions corresponding to data values. crossLines: AgCrossLineOptions[];
interface AgCrossLineOptions {
// Whether or not to show the cross line.
enabled?: boolean;
// Type of cross line to render.
type: 'line' | 'range';
// The data value at which the line should be positioned. This property is used if the crossLine type is `line`.
value?: DataValue;
// The range of values from the data used to display lines at a desired chart region. This property is only used for crossLine type `range`.
range?: [ DataValue, DataValue ];
// The colour to use for the fill of the range.
fill?: CssColor;
// The opacity of the fill for the range.
fillOpacity?: Opacity;
// The colour of the stroke for the lines.
stroke?: CssColor;
// The width in pixels of the stroke for the lines.
strokeWidth?: PixelSize;
// The opacity of the stroke for the lines.
strokeOpacity?: Opacity;
// Defines how the line stroke is rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels.
lineDash?: PixelSize[];
// Configuration for the crossLine label.
label?: AgCrossLineLabelOptions;
}
type DataValue = any
type CssColor = string
type Opacity = number
type PixelSize = number
interface AgCrossLineLabelOptions {
// Whether or not to show the cross line label.
enabled?: boolean;
// The text to show in the label.
text?: string;
// The font style to use for the label.
fontStyle?: FontStyle;
// The font weight to use for the label.
fontWeight?: FontWeight;
// The font size in pixels to use for the label.
fontSize?: FontSize;
// The font family to use for the label.
fontFamily?: FontFamily;
// Padding in pixels between the label and the edge of the crossLine.
padding?: PixelSize;
// The colour to use for the label.
color?: CssColor;
// The position of the crossLine label.
position?: AgCrossLineLabelPosition;
// The rotation of the crossLine label in degrees.
rotation?: number;
}
type FontStyle =
'normal'
| 'italic'
| 'oblique'
type FontWeight =
'normal'
| 'bold'
| 'bolder'
| 'lighter'
| '100'
| '200'
| '300'
| '400'
| '500'
| '600'
| '700'
| '800'
| '900'
type FontSize = number
type FontFamily = string
type AgCrossLineLabelPosition =
'top'
| 'left'
| 'right'
| 'bottom'
| 'topLeft'
| 'topRight'
| 'bottomLeft'
| 'bottomRight'
| 'inside'
| 'insideLeft'
| 'insideRight'
| 'insideTop'
| 'insideBottom'
| 'insideTopLeft'
| 'insideBottomLeft'
| 'insideTopRight'
| 'insideBottomRight'
|
| PixelSize | If set to a non-zero value, the axis will have the specified thickness regardless of label size. thickness: PixelSize;
type PixelSize = number
|
Number Axis Options
| 'number' | 'number' |
| boolean | If 'true', the range will be rounded up to ensure nice equal spacing between the ticks. Default: true |
| number | User override for the automatically determined min value (based on series data). |
| number | User override for the automatically determined max value (based on series data). |
| AgAxisNumberTickOptions | Configuration for the axis ticks. tick: AgAxisNumberTickOptions;
interface AgAxisNumberTickOptions {
// The step value between ticks specified as a number. If the configured interval results in too many ticks given the chart size, it will be ignored.
interval?: number;
// The width in pixels of the axis ticks (and corresponding grid line).
width?: PixelSize;
// The length in pixels of the axis ticks.
size?: PixelSize;
// The colour of the axis ticks.
color?: CssColor;
// Array of values in axis units to display as ticks along the axis.
// The values in this array must be compatible with the axis type.
values?: any[];
// Minimum gap in pixels between tick lines.
minSpacing?: number;
// Maximum gap in pixels between tick lines.
maxSpacing?: number;
}
type PixelSize = number
type CssColor = string
|
| AgCartesianAxisPosition | The position on the chart where the axis should be rendered. position: AgCartesianAxisPosition;
type AgCartesianAxisPosition =
'top'
| 'right'
| 'bottom'
| 'left'
|
| AgAxisCaptionOptions | Configuration for the title shown next to the axis. title: AgAxisCaptionOptions;
interface AgAxisCaptionOptions {
// Whether or not the title should be shown.
enabled?: boolean;
// The text to show in the title.
text?: string;
// The font style to use for the title.
fontStyle?: FontStyle;
// The font weight to use for the title.
fontWeight?: FontWeight;
// The font size in pixels to use for the title.
fontSize?: FontSize;
// The font family to use for the title.
fontFamily?: FontFamily;
// The colour to use for the title.
color?: CssColor;
}
type FontStyle =
'normal'
| 'italic'
| 'oblique'
type FontWeight =
'normal'
| 'bold'
| 'bolder'
| 'lighter'
| '100'
| '200'
| '300'
| '400'
| '500'
| '600'
| '700'
| '800'
| '900'
type FontSize = number
type FontFamily = string
type CssColor = string
|
| AgAxisLineOptions | Configuration for the axis line. line: AgAxisLineOptions;
interface AgAxisLineOptions {
// The width in pixels of the axis line.
width?: PixelSize;
// The colour of the axis line.
color?: CssColor;
}
type PixelSize = number
type CssColor = string
|
| AgAxisLabelOptions | Configuration for the axis labels, shown next to the ticks. label: AgAxisLabelOptions;
interface AgAxisLabelOptions {
// The font style to use for the labels.
fontStyle?: FontStyle;
// The font weight to use for the labels.
fontWeight?: FontWeight;
// The font size in pixels to use for the labels.
fontSize?: FontSize;
// The font family to use for the labels
fontFamily?: FontFamily;
// Padding in pixels between the axis label and the tick.
padding?: PixelSize;
// The colour to use for the labels
color?: CssColor;
// The rotation of the axis labels in degrees. Note: for integrated charts the default is 335 degrees, unless the axis shows grouped or default categories (indexes). The first row of labels in a grouped category axis is rotated perpendicular to the axis line.
rotation?: number;
// If specified and axis labels may collide, they are rotated so that they are positioned at the supplied angle. This is enabled by default for category. If the `rotation` property is specified, it takes precedence.
autoRotate?: boolean;
// If autoRotate is enabled, specifies the rotation angle to use when autoRotate is activated. Defaults to an angle of 335 degrees if unspecified.
autoRotateAngle?: number;
// Avoid axis label collision by automatically reducing the number of ticks displayed. If set to `false`, axis labels may collide.
avoidCollisions?: boolean;
// Minimum gap in pixels between the axis labels before being removed to avoid collisions.
minSpacing?: PixelSize;
// Format string used when rendering labels.
format?: string;
// Function used to render axis labels. If `value` is a number, `fractionDigits` will also be provided, which indicates the number of fractional digits used in the step between ticks; for example, a tick step of `0.0005` would have `fractionDigits` set to `4`
formatter?: (params: AgAxisLabelFormatterParams) => string | undefined;
}
type FontStyle =
'normal'
| 'italic'
| 'oblique'
type FontWeight =
'normal'
| 'bold'
| 'bolder'
| 'lighter'
| '100'
| '200'
| '300'
| '400'
| '500'
| '600'
| '700'
| '800'
| '900'
type FontSize = number
type FontFamily = string
type PixelSize = number
type CssColor = string
interface AgAxisLabelFormatterParams {
value: any;
index: number;
fractionDigits?: number;
formatter?: (x: any) => string;
}
|
| AgAxisGridStyle[] | Configuration of the lines used to form the grid in the chart area. gridStyle: AgAxisGridStyle[];
interface AgAxisGridStyle {
// The colour of the grid line.
stroke?: CssColor;
// Defines how the gridlines are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels.
lineDash?: PixelSize[];
}
type CssColor = string
type PixelSize = number
|
| AgCrossLineOptions[] | Add cross lines or regions corresponding to data values. crossLines: AgCrossLineOptions[];
interface AgCrossLineOptions {
// Whether or not to show the cross line.
enabled?: boolean;
// Type of cross line to render.
type: 'line' | 'range';
// The data value at which the line should be positioned. This property is used if the crossLine type is `line`.
value?: DataValue;
// The range of values from the data used to display lines at a desired chart region. This property is only used for crossLine type `range`.
range?: [ DataValue, DataValue ];
// The colour to use for the fill of the range.
fill?: CssColor;
// The opacity of the fill for the range.
fillOpacity?: Opacity;
// The colour of the stroke for the lines.
stroke?: CssColor;
// The width in pixels of the stroke for the lines.
strokeWidth?: PixelSize;
// The opacity of the stroke for the lines.
strokeOpacity?: Opacity;
// Defines how the line stroke is rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels.
lineDash?: PixelSize[];
// Configuration for the crossLine label.
label?: AgCrossLineLabelOptions;
}
type DataValue = any
type CssColor = string
type Opacity = number
type PixelSize = number
interface AgCrossLineLabelOptions {
// Whether or not to show the cross line label.
enabled?: boolean;
// The text to show in the label.
text?: string;
// The font style to use for the label.
fontStyle?: FontStyle;
// The font weight to use for the label.
fontWeight?: FontWeight;
// The font size in pixels to use for the label.
fontSize?: FontSize;
// The font family to use for the label.
fontFamily?: FontFamily;
// Padding in pixels between the label and the edge of the crossLine.
padding?: PixelSize;
// The colour to use for the label.
color?: CssColor;
// The position of the crossLine label.
position?: AgCrossLineLabelPosition;
// The rotation of the crossLine label in degrees.
rotation?: number;
}
type FontStyle =
'normal'
| 'italic'
| 'oblique'
type FontWeight =
'normal'
| 'bold'
| 'bolder'
| 'lighter'
| '100'
| '200'
| '300'
| '400'
| '500'
| '600'
| '700'
| '800'
| '900'
type FontSize = number
type FontFamily = string
type AgCrossLineLabelPosition =
'top'
| 'left'
| 'right'
| 'bottom'
| 'topLeft'
| 'topRight'
| 'bottomLeft'
| 'bottomRight'
| 'inside'
| 'insideLeft'
| 'insideRight'
| 'insideTop'
| 'insideBottom'
| 'insideTopLeft'
| 'insideBottomLeft'
| 'insideTopRight'
| 'insideBottomRight'
|
| PixelSize | If set to a non-zero value, the axis will have the specified thickness regardless of label size. thickness: PixelSize;
type PixelSize = number
|
Time Axis Options
| 'time' | 'time' |
| boolean | If 'true', the range will be rounded up to ensure nice equal spacing between the ticks. Default: true |
| AgAxisTimeTickOptions | Configuration for the axis ticks. tick: AgAxisTimeTickOptions;
interface AgAxisTimeTickOptions {
// A hint of how many ticks to use across an axis.
// The axis is not guaranteed to use exactly this number of ticks, but will try to use a number of ticks that is close to the number given.
// The following intervals from the `agCharts.time` namespace can be used:
// `millisecond, second, minute, hour, day, sunday, monday, tuesday, wednesday, thursday, friday, saturday, month, year, utcMinute, utcHour, utcDay, utcMonth, utcYear`.
// Derived intervals can be created by using the `every` method on the default ones. For example, `agCharts.time.month.every(2)` will return a derived interval that will make the axis place ticks for every other month.
count?: any;
// The step value between ticks specified as a TimeInterval or a number. If the configured interval results in dense ticks given the data domain, the ticks will be removed.
interval?: any;
// The width in pixels of the axis ticks (and corresponding grid line).
width?: PixelSize;
// The length in pixels of the axis ticks.
size?: PixelSize;
// The colour of the axis ticks.
color?: CssColor;
// Array of values in axis units to display as ticks along the axis.
// The values in this array must be compatible with the axis type.
values?: any[];
// Minimum gap in pixels between tick lines.
minSpacing?: number;
// Maximum gap in pixels between tick lines.
maxSpacing?: number;
}
type PixelSize = number
type CssColor = string
|
| Date | number | User override for the automatically determined min value (based on series data). |
| Date | number | User override for the automatically determined max value (based on series data). |
| AgCartesianAxisPosition | The position on the chart where the axis should be rendered. position: AgCartesianAxisPosition;
type AgCartesianAxisPosition =
'top'
| 'right'
| 'bottom'
| 'left'
|
| AgAxisCaptionOptions | Configuration for the title shown next to the axis. title: AgAxisCaptionOptions;
interface AgAxisCaptionOptions {
// Whether or not the title should be shown.
enabled?: boolean;
// The text to show in the title.
text?: string;
// The font style to use for the title.
fontStyle?: FontStyle;
// The font weight to use for the title.
fontWeight?: FontWeight;
// The font size in pixels to use for the title.
fontSize?: FontSize;
// The font family to use for the title.
fontFamily?: FontFamily;
// The colour to use for the title.
color?: CssColor;
}
type FontStyle =
'normal'
| 'italic'
| 'oblique'
type FontWeight =
'normal'
| 'bold'
| 'bolder'
| 'lighter'
| '100'
| '200'
| '300'
| '400'
| '500'
| '600'
| '700'
| '800'
| '900'
type FontSize = number
type FontFamily = string
type CssColor = string
|
| AgAxisLineOptions | Configuration for the axis line. line: AgAxisLineOptions;
interface AgAxisLineOptions {
// The width in pixels of the axis line.
width?: PixelSize;
// The colour of the axis line.
color?: CssColor;
}
type PixelSize = number
type CssColor = string
|
| AgAxisLabelOptions | Configuration for the axis labels, shown next to the ticks. label: AgAxisLabelOptions;
interface AgAxisLabelOptions {
// The font style to use for the labels.
fontStyle?: FontStyle;
// The font weight to use for the labels.
fontWeight?: FontWeight;
// The font size in pixels to use for the labels.
fontSize?: FontSize;
// The font family to use for the labels
fontFamily?: FontFamily;
// Padding in pixels between the axis label and the tick.
padding?: PixelSize;
// The colour to use for the labels
color?: CssColor;
// The rotation of the axis labels in degrees. Note: for integrated charts the default is 335 degrees, unless the axis shows grouped or default categories (indexes). The first row of labels in a grouped category axis is rotated perpendicular to the axis line.
rotation?: number;
// If specified and axis labels may collide, they are rotated so that they are positioned at the supplied angle. This is enabled by default for category. If the `rotation` property is specified, it takes precedence.
autoRotate?: boolean;
// If autoRotate is enabled, specifies the rotation angle to use when autoRotate is activated. Defaults to an angle of 335 degrees if unspecified.
autoRotateAngle?: number;
// Avoid axis label collision by automatically reducing the number of ticks displayed. If set to `false`, axis labels may collide.
avoidCollisions?: boolean;
// Minimum gap in pixels between the axis labels before being removed to avoid collisions.
minSpacing?: PixelSize;
// Format string used when rendering labels.
format?: string;
// Function used to render axis labels. If `value` is a number, `fractionDigits` will also be provided, which indicates the number of fractional digits used in the step between ticks; for example, a tick step of `0.0005` would have `fractionDigits` set to `4`
formatter?: (params: AgAxisLabelFormatterParams) => string | undefined;
}
type FontStyle =
'normal'
| 'italic'
| 'oblique'
type FontWeight =
'normal'
| 'bold'
| 'bolder'
| 'lighter'
| '100'
| '200'
| '300'
| '400'
| '500'
| '600'
| '700'
| '800'
| '900'
type FontSize = number
type FontFamily = string
type PixelSize = number
type CssColor = string
interface AgAxisLabelFormatterParams {
value: any;
index: number;
fractionDigits?: number;
formatter?: (x: any) => string;
}
|
| AgAxisGridStyle[] | Configuration of the lines used to form the grid in the chart area. gridStyle: AgAxisGridStyle[];
interface AgAxisGridStyle {
// The colour of the grid line.
stroke?: CssColor;
// Defines how the gridlines are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels.
lineDash?: PixelSize[];
}
type CssColor = string
type PixelSize = number
|
| AgCrossLineOptions[] | Add cross lines or regions corresponding to data values. crossLines: AgCrossLineOptions[];
interface AgCrossLineOptions {
// Whether or not to show the cross line.
enabled?: boolean;
// Type of cross line to render.
type: 'line' | 'range';
// The data value at which the line should be positioned. This property is used if the crossLine type is `line`.
value?: DataValue;
// The range of values from the data used to display lines at a desired chart region. This property is only used for crossLine type `range`.
range?: [ DataValue, DataValue ];
// The colour to use for the fill of the range.
fill?: CssColor;
// The opacity of the fill for the range.
fillOpacity?: Opacity;
// The colour of the stroke for the lines.
stroke?: CssColor;
// The width in pixels of the stroke for the lines.
strokeWidth?: PixelSize;
// The opacity of the stroke for the lines.
strokeOpacity?: Opacity;
// Defines how the line stroke is rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels.
lineDash?: PixelSize[];
// Configuration for the crossLine label.
label?: AgCrossLineLabelOptions;
}
type DataValue = any
type CssColor = string
type Opacity = number
type PixelSize = number
interface AgCrossLineLabelOptions {
// Whether or not to show the cross line label.
enabled?: boolean;
// The text to show in the label.
text?: string;
// The font style to use for the label.
fontStyle?: FontStyle;
// The font weight to use for the label.
fontWeight?: FontWeight;
// The font size in pixels to use for the label.
fontSize?: FontSize;
// The font family to use for the label.
fontFamily?: FontFamily;
// Padding in pixels between the label and the edge of the crossLine.
padding?: PixelSize;
// The colour to use for the label.
color?: CssColor;
// The position of the crossLine label.
position?: AgCrossLineLabelPosition;
// The rotation of the crossLine label in degrees.
rotation?: number;
}
type FontStyle =
'normal'
| 'italic'
| 'oblique'
type FontWeight =
'normal'
| 'bold'
| 'bolder'
| 'lighter'
| '100'
| '200'
| '300'
| '400'
| '500'
| '600'
| '700'
| '800'
| '900'
type FontSize = number
type FontFamily = string
type AgCrossLineLabelPosition =
'top'
| 'left'
| 'right'
| 'bottom'
| 'topLeft'
| 'topRight'
| 'bottomLeft'
| 'bottomRight'
| 'inside'
| 'insideLeft'
| 'insideRight'
| 'insideTop'
| 'insideBottom'
| 'insideTopLeft'
| 'insideBottomLeft'
| 'insideTopRight'
| 'insideBottomRight'
|
| PixelSize | If set to a non-zero value, the axis will have the specified thickness regardless of label size. thickness: PixelSize;
type PixelSize = number
|
Log Axis Options
| 'log' | 'log' |
| boolean | If 'true', the range will be rounded up to ensure nice equal spacing between the ticks. Default: true |
| number | User override for the automatically determined min value (based on series data). This value can be any non-zero number less than the configured max value. |
| number | User override for the automatically determined max value (based on series data). This value can be any non-zero number more than the configured min value. |
| number | The base of the logarithm used. Default: 10 |
| AgAxisNumberTickOptions | Configuration for the axis ticks. tick: AgAxisNumberTickOptions;
interface AgAxisNumberTickOptions {
// The step value between ticks specified as a number. If the configured interval results in too many ticks given the chart size, it will be ignored.
interval?: number;
// The width in pixels of the axis ticks (and corresponding grid line).
width?: PixelSize;
// The length in pixels of the axis ticks.
size?: PixelSize;
// The colour of the axis ticks.
color?: CssColor;
// Array of values in axis units to display as ticks along the axis.
// The values in this array must be compatible with the axis type.
values?: any[];
// Minimum gap in pixels between tick lines.
minSpacing?: number;
// Maximum gap in pixels between tick lines.
maxSpacing?: number;
}
type PixelSize = number
type CssColor = string
|
| AgCartesianAxisPosition | The position on the chart where the axis should be rendered. position: AgCartesianAxisPosition;
type AgCartesianAxisPosition =
'top'
| 'right'
| 'bottom'
| 'left'
|
| AgAxisCaptionOptions | Configuration for the title shown next to the axis. title: AgAxisCaptionOptions;
interface AgAxisCaptionOptions {
// Whether or not the title should be shown.
enabled?: boolean;
// The text to show in the title.
text?: string;
// The font style to use for the title.
fontStyle?: FontStyle;
// The font weight to use for the title.
fontWeight?: FontWeight;
// The font size in pixels to use for the title.
fontSize?: FontSize;
// The font family to use for the title.
fontFamily?: FontFamily;
// The colour to use for the title.
color?: CssColor;
}
type FontStyle =
'normal'
| 'italic'
| 'oblique'
type FontWeight =
'normal'
| 'bold'
| 'bolder'
| 'lighter'
| '100'
| '200'
| '300'
| '400'
| '500'
| '600'
| '700'
| '800'
| '900'
type FontSize = number
type FontFamily = string
type CssColor = string
|
| AgAxisLineOptions | Configuration for the axis line. line: AgAxisLineOptions;
interface AgAxisLineOptions {
// The width in pixels of the axis line.
width?: PixelSize;
// The colour of the axis line.
color?: CssColor;
}
type PixelSize = number
type CssColor = string
|
| AgAxisLabelOptions | Configuration for the axis labels, shown next to the ticks. label: AgAxisLabelOptions;
interface AgAxisLabelOptions {
// The font style to use for the labels.
fontStyle?: FontStyle;
// The font weight to use for the labels.
fontWeight?: FontWeight;
// The font size in pixels to use for the labels.
fontSize?: FontSize;
// The font family to use for the labels
fontFamily?: FontFamily;
// Padding in pixels between the axis label and the tick.
padding?: PixelSize;
// The colour to use for the labels
color?: CssColor;
// The rotation of the axis labels in degrees. Note: for integrated charts the default is 335 degrees, unless the axis shows grouped or default categories (indexes). The first row of labels in a grouped category axis is rotated perpendicular to the axis line.
rotation?: number;
// If specified and axis labels may collide, they are rotated so that they are positioned at the supplied angle. This is enabled by default for category. If the `rotation` property is specified, it takes precedence.
autoRotate?: boolean;
// If autoRotate is enabled, specifies the rotation angle to use when autoRotate is activated. Defaults to an angle of 335 degrees if unspecified.
autoRotateAngle?: number;
// Avoid axis label collision by automatically reducing the number of ticks displayed. If set to `false`, axis labels may collide.
avoidCollisions?: boolean;
// Minimum gap in pixels between the axis labels before being removed to avoid collisions.
minSpacing?: PixelSize;
// Format string used when rendering labels.
format?: string;
// Function used to render axis labels. If `value` is a number, `fractionDigits` will also be provided, which indicates the number of fractional digits used in the step between ticks; for example, a tick step of `0.0005` would have `fractionDigits` set to `4`
formatter?: (params: AgAxisLabelFormatterParams) => string | undefined;
}
type FontStyle =
'normal'
| 'italic'
| 'oblique'
type FontWeight =
'normal'
| 'bold'
| 'bolder'
| 'lighter'
| '100'
| '200'
| '300'
| '400'
| '500'
| '600'
| '700'
| '800'
| '900'
type FontSize = number
type FontFamily = string
type PixelSize = number
type CssColor = string
interface AgAxisLabelFormatterParams {
value: any;
index: number;
fractionDigits?: number;
formatter?: (x: any) => string;
}
|
| AgAxisGridStyle[] | Configuration of the lines used to form the grid in the chart area. gridStyle: AgAxisGridStyle[];
interface AgAxisGridStyle {
// The colour of the grid line.
stroke?: CssColor;
// Defines how the gridlines are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels.
lineDash?: PixelSize[];
}
type CssColor = string
type PixelSize = number
|
| AgCrossLineOptions[] | Add cross lines or regions corresponding to data values. crossLines: AgCrossLineOptions[];
interface AgCrossLineOptions {
// Whether or not to show the cross line.
enabled?: boolean;
// Type of cross line to render.
type: 'line' | 'range';
// The data value at which the line should be positioned. This property is used if the crossLine type is `line`.
value?: DataValue;
// The range of values from the data used to display lines at a desired chart region. This property is only used for crossLine type `range`.
range?: [ DataValue, DataValue ];
// The colour to use for the fill of the range.
fill?: CssColor;
// The opacity of the fill for the range.
fillOpacity?: Opacity;
// The colour of the stroke for the lines.
stroke?: CssColor;
// The width in pixels of the stroke for the lines.
strokeWidth?: PixelSize;
// The opacity of the stroke for the lines.
strokeOpacity?: Opacity;
// Defines how the line stroke is rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels.
lineDash?: PixelSize[];
// Configuration for the crossLine label.
label?: AgCrossLineLabelOptions;
}
type DataValue = any
type CssColor = string
type Opacity = number
type PixelSize = number
interface AgCrossLineLabelOptions {
// Whether or not to show the cross line label.
enabled?: boolean;
// The text to show in the label.
text?: string;
// The font style to use for the label.
fontStyle?: FontStyle;
// The font weight to use for the label.
fontWeight?: FontWeight;
// The font size in pixels to use for the label.
fontSize?: FontSize;
// The font family to use for the label.
fontFamily?: FontFamily;
// Padding in pixels between the label and the edge of the crossLine.
padding?: PixelSize;
// The colour to use for the label.
color?: CssColor;
// The position of the crossLine label.
position?: AgCrossLineLabelPosition;
// The rotation of the crossLine label in degrees.
rotation?: number;
}
type FontStyle =
'normal'
| 'italic'
| 'oblique'
type FontWeight =
'normal'
| 'bold'
| 'bolder'
| 'lighter'
| '100'
| '200'
| '300'
| '400'
| '500'
| '600'
| '700'
| '800'
| '900'
type FontSize = number
type FontFamily = string
type AgCrossLineLabelPosition =
'top'
| 'left'
| 'right'
| 'bottom'
| 'topLeft'
| 'topRight'
| 'bottomLeft'
| 'bottomRight'
| 'inside'
| 'insideLeft'
| 'insideRight'
| 'insideTop'
| 'insideBottom'
| 'insideTopLeft'
| 'insideBottomLeft'
| 'insideTopRight'
| 'insideBottomRight'
|
| PixelSize | If set to a non-zero value, the axis will have the specified thickness regardless of label size. thickness: PixelSize;
type PixelSize = number
|
Next Up
Continue to the next section to learn about the Axis Ticks.