Chart

a graphical chart

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"

bounds

The limits for the values, specified as a two dimensional array. If not specified, the bounds will automatically be set to fit the provided values.

[[0, 10], [0, 100]]

color

A color identifier to use for the graphic color. If an array is specified, it is used to create a gradient mask. Array objects indicate what color to show at what value. In the simplest case, the values should map to the Y bounds values, resulting in a vertical gradient. Specifying more objects allows more fine grained control over where the gradient colors change.

"accent-1"

{"color": "accent-1", "opacity": true}

where opacity could be:"weak""medium""strong"true

gap

The amount of spacing between data points. This is only used when the size specifies width as 'auto'.

"none""xxsmall""xsmall""small""medium""large""xlarge""string"

gridArea

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

"a parent grid area name"

id

A unique identifier for the Chart. This is required if more than one Chart is shown and they use color gradients.

"string"

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": "..."
}

onClick

Called when the user clicks on it. This is only available when the type is line or area.

() => {}

onHover

Called with a boolean argument indicating when the user hovers onto or away from it. This is only available when the type is line or area.

(true) => {}

overflow

Whether the chart strokes should overflow the component. Set this to true for precise positioning when stacking charts or including precise axes. Set this to false to have the graphical elements align with the component boundaries.

truefalse

round

Whether to round the line ends.

truefalse

size

The size of the Chart.

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"full"

"any CSS size"

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

thickness

The width of the stroke.

"hair""xsmall""small""medium""large""xlarge""none""string"

type

The visual type of chart.

"bar""line""area""point"

values

Array of value objects describing the data. 'value' is a tuple indicating the coordinate of the value or a triple indicating the x coordinate and a range of two y coordinates. 'label' is a text string describing it. 'onHover' and 'onClick' only work when type='bar'.

[20, 30]

[{"value": [10, 20]}]

[
  {
    "value": [10, 10, 20],
    "label": "first",
    "onClick": "() => {}",
    "onHover": "() => {}"
  }
]

Theme

chart.color

Color of the Chart.

"accent-1"

chart.extend

Any additional style for the Chart.

"any CSS"

(props) => {}

global.colors

Color options.

{
  "icon": {
    "0": "#",
    "1": "6",
    "2": "6",
    "3": "6",
    "4": "6",
    "5": "6",
    "6": "6",
    "dark": "#f8f8f8",
    "light": "#666666"
  },
  "active": "rgba(221,221,221,0.5)",
  "black": "#000000",
  "border": {
    "dark": "rgba(255,255,255,0.33)",
    "light": "rgba(0,0,0,0.33)"
  },
  "brand": "#7D4CDB",
  "control": {
    "dark": "accent-1",
    "light": "brand"
  },
  "focus": "#6FFFB0",
  "placeholder": "#AAAAAA",
  "selected": "brand",
  "text": {
    "dark": "#f8f8f8",
    "light": "#444444"
  },
  "white": "#FFFFFF",
  "accent-1": "#6FFFB0",
  "accent-2": "#FD6FFF",
  "accent-3": "#81FCED",
  "accent-4": "#FFCA58",
  "dark-1": "#333333",
  "dark-2": "#555555",
  "dark-3": "#777777",
  "dark-4": "#999999",
  "dark-5": "#999999",
  "dark-6": "#999999",
  "light-1": "#F8F8F8",
  "light-2": "#F2F2F2",
  "light-3": "#EDEDED",
  "light-4": "#DADADA",
  "light-5": "#DADADA",
  "light-6": "#DADADA",
  "neutral-1": "#00873D",
  "neutral-2": "#3D138D",
  "neutral-3": "#00739D",
  "neutral-4": "#A2423D",
  "status-critical": "#FF4040",
  "status-error": "#FF4040",
  "status-warning": "#FFAA15",
  "status-ok": "#00C781",
  "status-unknown": "#CCCCCC",
  "status-disabled": "#CCCCCC",
  "background": {
    "light": "#ffffff",
    "dark": "#000000"
  }
}

global.edgeSize

The possible sizes for the thickness in the Chart.

{
  "none": "0px",
  "hair": "1px",
  "xxsmall": "3px",
  "xsmall": "6px",
  "small": "12px",
  "medium": "24px",
  "large": "48px",
  "xlarge": "96px",
  "responsiveBreakpoint": "small"
}

global.opacity

The opacity of the Chart stroke.

{
  "strong": 0.8,
  "medium": 0.4,
  "weak": 0.1
}

global.size

The possible sizes for Chart width and height.

{
  "xxsmall": "48px",
  "xsmall": "96px",
  "small": "192px",
  "medium": "384px",
  "large": "768px",
  "xlarge": "1152px",
  "xxlarge": "1536px",
  "full": "100%"
}

Calc

a function to help calculate values for bounds and axis

Props

No properties