Time Axis

import {TimeAxis} from 'cx/charts';

The TimeAxis widget is used to map date/time data along the horizontal or vertical axis of a chart.

<div class="widgets" controller={PageController}>
    <Svg style="width:600px;height:300px;" margin="60 60 60 60">
        <Chart axes={{
            x: <TimeAxis />,
            y: <NumericAxis vertical />,
        }}>
            <Rectangle fill="white"/>
            <Gridlines />
            <ColumnGraph data-bind="$page.data"
                        size={30 * 24 * 60 * 60 * 1000}
                        offset={15 * 24 * 60 * 60 * 1000}
                        xField="date"
                        yField="value" />
        </Chart>
    </Svg>
</div>

Copied!Cx Fiddle

Examples

Complex Labels

Configuration

Property	Description	Type
format	Value format. If left empty, the format is selected based on the domain range.	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.	date/string/number
min	Minimum value.	date/string/number
secondary	Used as a secondary axis. Displayed at the top/right.	boolean
snapToTicks	Number in range of `0-2`. `0` means that range is aligned with the lowest ticks. Default value is `1` which means 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
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
minLabelDistanceFormatOverride	Mapping of formats to label distances, i.e. `{ "datetime;YYYYMM": 80 }`. Set `useLabelDistanceFormatOverrides` to `true` to apply these overrides.	object
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
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
useLabelDistanceFormatOverrides	Set to `true` to apply precise label distances from `minLabelDistanceFormatOverride` based on the resolved label format.	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

Time Axis