Numeric Axis

import {NumericAxis} from 'cx/charts';

The NumericAxis widget is used to map numeric data along the horizontal or vertical axis of a chart. Other widgets, such as graphs, use it to calculate their position on the chart. On the other side, the axes adapt their visible range to the data being shown. The axes are also responsive: different tick configuration is selected based on the available space.

Index

<Svg style="width:400px;height:300px;" margin="60 60 60 60">
    <Chart axes={{
        x: <NumericAxis min={100} max={500} />,
        y: <NumericAxis vertical max={5000} />,
        x2: <NumericAxis secondary inverted />,
        y2: <NumericAxis vertical secondary />
    }}>
        <Rectangle fill="white" margin={1}/>
        <Gridlines />
        <Gridlines xAxis="x2" yAxis="y2" />
    </Chart>
</Svg>

Copied!Cx Fiddle

Be careful with gridlines when using secondary axes.

Configuration

Property	Description	Type
format	Value format. Default is `n`.	string
hideLabels	Set to `true` to hide the axis labels. Default value is `false`.	boolean
hideLine	Set to `true` to hide the axis line. Default value is `false`.	boolean
hideTicks	Set to `true` to hide the axis ticks. Default value is `false`.	boolean
inverted	When set to `true`, the values are displayed in descending order.	boolean
labelAnchor	Label text-anchor value. Allowed values are `start`, `end` and `middle`. Default value is set based on the value of `vertical` and `secondary` flags.	string
labelDx	Horizontal text offset.	string
labelDy	Vertical text offset which can be used for vertical alignment.	string
labelLineCountDyFactor	Used for vertical adjustment of multi-line labels. Default value is `auto` which means that value is initialized based on axis configuration. Value `0` means that label will grow towards the bottom of the screen. Value `-1` will make labels to grow towards the top of the screen. `-0.5` will make labels vertically centered.	number
labelLineHeight	Used for vertical adjustment of multi-line labels. Default value is 1 which means that labels are stacked without any space between them. Value of 1.4 will add 40% of the label height as a space between labels.	number
labelMaxLineLength	If `labelWrap` is on, this number is used as a measure to split labels into multiple lines. Default value is `10`.	number
labelOffset	Distance between labels and the axis. Defaults to `10`.	number/string
labelRotation	Label rotation angle in degrees.	number/string
labelWrap	Set to `true` to break long labels into multiple lines. Default value is `false`. Text is split at space characters. See also `labelMaxLineLength` and `labelLineCountDyFactor`.	boolean
max	Maximum value.	number
min	Minimum value.	number
normalized	Set to true to normalize the input range.	boolean
secondary	Used as a secondary axis. Displayed at the top/right.	boolean
snapToTicks	A number ranged between `0-2`. `0` means that the range is aligned with the lowest ticks. Default value is `1`, which means that the range is aligned with medium ticks. Use value `2` to align with major ticks.	number
vertical	Set to `true` for vertical axes.	boolean
alternateLabelOffset	Distance between the even labels and the axis.	number/string
anchors	Anchor defines how child bounds are tied to the parent. Zero aligns with the top/left edge. One aligns with the bottom/right edge. See Svg for more information.	string/number/rect
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
deadZone	Size of a zone reserved for labels for both lower and upper end of the axis.	number
hidden	When set to `true`, rendering of visual elements of the axis, such as ticks and labels, is skipped, but their function is preserved.	boolean
items children	List of child elements.	array
labelClass	Additional CSS class to be applied to the axis labels.	string/object
labelDivisor	Number used to divide values before rendering axis labels. Default value is `1`.	number
labelStyle	Additional CSS style to be applied to the axis labels.	string/object
lineClass	Additional CSS class to be applied to the axis line.	string/object
lineStyle	Additional CSS style to be applied to the axis line.	string/object
lowerDeadZone	Size of a zone reserved for labels near the lower end of the axis.	number
margin	Apply margin to the given boundaries. See Svg for more information.	string/number/rect
minLabelDistanceHorizontal	The smallest distance between two labels on the horizontal axis. Defaults to `50`.	number
minLabelDistanceVertical	The smallest distance between two labels on the vertical axis. Defaults to `40`.	number
minLabelTickSize	Specifies minimum value increment between labels. Useful when formatting is not flexible enough, i.e. set to 1 for integer axes to avoid duplicate labels.	number
minTickDistance	The smallest distance between two ticks on the axis. Defaults to `25`.	number
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
offset	Move boundaries specified by the offset. See Svg for more information.	string/number/rect
onCreateLabelFormatter	A function used to create a formatter function for axis labels. See Complex Labels example for more info.	function
outerLayout	Defines the outer layout which wraps the widget.	widget
padding	Padding to be applied to the boundaries rectangle before passing to the children.	string/number/rect
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
tickClass	Additional CSS class to be applied to the axis ticks.	string/object
tickOffset	Distance between ticks and the axis. Default is `0``. Use negative values for offset to make ticks appear on both sides of the axis.	number/string
tickSize	Size of the axis tick line. Defaults to `3`.	number
tickStyle	Additional CSS style to be applied to the axis ticks.	string/object
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
upperDeadZone	Size of a zone reserved for labels near the upper (higher) end of the axis.	number
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

Numeric Axis