NOTE: DataChart is an experimental component. Its properties are likely to change in a way that breaks compatibility. It will not abide by semantic versioning rules until this note is removed. We are publishing it to make it easier for it to be evaluated. Please send your feedback in the #general channel on slack.

DataChart

takes a data set and visualizes it

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"
"center"
"end"
"stretch"

chart

Chart properties indicating how to visualize the data. 'key' indicates which property of the data objects to use. 'keys' indicates that multiple properties should be used for a stacked bar chart. DataChart uses the key/keys to build the right 'values' for the underlying Chart. All of the other properties in 'chart' are passed through to the Chart.

[{"key": "amount"}]
[
  {
    "key": "amount",
    "type": "line",
    "color": "graph-1",
    "thickness": "medium",
    "dash": true,
    "round": true
  }
]
[
  {
    "keys": [
      {"key": "amount"},
      {"key": "percent"}
    ],
    "thickness": "medium"
  }
]

data

the data set
[
  {
    "date": "2020-05-28",
    "amount": 88,
    "percent": 20
  },
  {
    "date": "2020-05-27",
    "amount": 77,
    "percent": 15
  }
]

gap

The spacing between the axes and the Charts.
"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"
"small"
"medium"
"large"
"xlarge"
{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

pad

Spacing around the outer edge of the drawing coordinate area for the graphic elements to overflow into.

"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"

size

The size of the Charts. This does not include the axes and any gap. It is passed through to the underlying Chart.

"fill"
{"height": "...", "width": "..."}

thickness

Chart thickness given to all Charts if not specified per Chart in 'chart'.

"hair"
"xsmall"
"small"
"medium"
"large"
"xlarge"

xAxis

x-axis configuration. 'guide' specifies that vertical guide lines should be drawn under the Chart, one per label. 'key' specifies what property in the 'data' should be used as any label content. 'labels' specifies how many labels to show. 'render' allows for custom rendering of the labels. It will be called with the current data index and axis index and should return the element to render: (dataIndex, axisIndex) => element.

true
{
  "guide": true,
  "key": "date",
  "labels": 2,
  "render": "(dataIndex, axisIndex) => element"
}

yAxis

y-axis configuration. 'guide' specifies that horizontal guide lines should be drawn under the Chart, one per label. 'labels' specifies how many labels to show. 'render' allows for custom rendering of the labels. It will be called with the value and axis index and should return the element to render: (value, axisIndex) => element

true
{
  "guide": true,
  "labels": 3,
  "render": "(value, data, dataIndex, axisIndex) => element"
}