Charts

import {Chart} from 'cx/charts';

The Chart widget is used to define axes and bounds for two-dimensional charts such as line, scatter, bar and column charts.

Charts

<Svg style="width:300px;height:200px" margin="10 20 30 50">
   <Chart axes={{
      x: <NumericAxis />,
      y: <NumericAxis vertical/>
   }}>
      <Rectangle fill="white" />
      <Gridlines />
   </Chart>
</Svg>

Copied!Cx Fiddle

The most important part is axis configuration. Numeric, category and date axis types are supported.

Main Chart Elements Overview

Main chart elements are:

axes
- NumericAxis - Used to present numerical data.
- CategoryAxis - Used to present finite data sets.
Graphs (series)
- LineGraph - Used to draw a line graph out of a series of 2d points.
- BarGraph - Used to draw a series of bars.
- ColumnGraph - Used to draw a series of columns.
Individual (repeatable) elements
- Column - A single column (vertical bar) in column charts. Used when all columns are not the same. Otherwise use the ColumnGraph widget.
- Bar - A single bar in bar charts. Used when all bars are not the same. Otherwise use the BarGraph widget.
- Marker - A marker. Used for scatter charts and other charts for point markers. Supports dragging.
- MarkerLine - A marker line. Used to highlight certain values, e.g. min or max value.
- Ranges - Draw rectangular areas on the chart - zones.
SVG elements:
- Rectangle - Used to draw a rectangle.
- Line - Used to draw a line.

Configuration

Property	Description	Type
axes	Axis definition. Each key represent an axis, and each value hold axis configuration.	object
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
axesOnTop	Set to `true` to render axes on top of the data series.	object
items children	List of child elements.	array
margin	Apply margin to the given boundaries. See Svg for more information.	string/number/rect
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
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
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	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

Charts