Category Axis

import {CategoryAxis} from 'cx/charts';

The CategoryAxis widget is used to map discrete data values along the horizontal or vertical axis of a chart. It's commonly used with bar and scatter charts.

Index

<Svg style="width:400px;height:300px;" margin="60 60 60 60">
    <Chart axes={{
        x: <CategoryAxis />,
        y: <CategoryAxis vertical />
    }}>
        <Rectangle fill="white"/>
        <Gridlines />

        <Marker x="Red" y="Triangle" shape="triangle" size={20} colorIndex="0" />
        <Marker x="Green" y="Triangle" shape="triangle" size={20} colorIndex="9" />
        <Marker x="Blue" y="Triangle" shape="triangle" size={20} colorIndex="5" />

        <Marker x="Red" y="Square" shape="square" size={20} colorIndex="0" />
        <Marker x="Green" y="Square" shape="square" size={20} colorIndex="9" />
        <Marker x="Blue" y="Square" shape="square" size={20} colorIndex="5" />

        <Marker x="Red" y="Circle" shape="circle" size={20} colorIndex="0" />
        <Marker x="Green" y="Circle" shape="circle" size={20} colorIndex="9" />
        <Marker x="Blue" y="Circle" shape="circle" size={20} colorIndex="5" />

    </Chart>
</Svg>

Copied!Cx Fiddle

Examples

Configuration

Property	Description	Type
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
minSize	Sometimes, there is not enough data and each category takes a lot of space. `minSize` can be used to add fake entries up to the specified number, so everything looks normal.	integer
names	Names corresponding the given `values`. For example, values may be 0 .. 11 and names could be Jan .. Dec.	array/object
secondary	Used as a secondary axis. Displayed at the top/right.	boolean
uniform	Uniform axes provide exact size and offset for all entries, while non-uniform axes adapt their size and offset to the number of entries under each category.	boolean
values	Values used to initialize the axis. If an object is provided, keys are used for values and values are used for names.	array/object
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
categoryCount	Output value that can be used to calculate chart dimensions based on discovered category values.	number
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
format	Additional label formatting. No format is set by default, values appear as is. Useful when values are not strings or string values that are too long.	string
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
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
margin	Apply margin to the given boundaries. See Svg for more information.	string/number/rect
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
useGridlineTicks	Set to `true` to show ticks aligned with gridlines instead of labels. Default is `false`.	boolean
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

Category Axis