chart

Chart

A graphical chart.

Usage

import { Chart } from 'grommet';
<Chart />

Properties

a11yTitle

Custom title to be used by screen readers.

string

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

gridArea

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

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.

none
xxsmall
xsmall
small
medium
large
xlarge
{
  bottom: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  horizontal: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  left: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  right: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  top: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  vertical: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string
}
string

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.

[[number]]

color

A color identifier to use for the graphic color. Defaults to accent-1.

string
{
  color: string,
  opacity: 
    weak
    medium
    strong
    boolean
}

onClick

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

function

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.

function

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.

boolean

round

Whether to round the line ends.

boolean

size

The size of the Chart. Defaults to { "width": "medium", "height": "small" }.

xxsmall
xsmall
small
medium
large
xlarge
full
{
  height: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    full
    string,
  width: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    full
    string
}
string

thickness

The width of the stroke. Defaults to medium.

hair
xsmall
small
medium
large
xlarge
none
string

type

The visual type of meter. Defaults to bar.

bar
line
area

values

Required. 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’.

[
  number
  [number]
  {
    label: string,
    onClick: function,
    onHover: function,
    value: 
      number
      [number]
  }
]

Theme

chart.extend

Any additional style for the Chart. Expects string | (props) => {}.

Defaults to

undefined

global.colors

color options used for Chart fill area. Expects object.

Defaults to

accent-1

global.edgeSize

The possible sizes for the thickness in the Chart. Expects object.

Defaults to

{
        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. Expects string.

Defaults to

undefined

global.size

The possible sizes for Chart width and height. Expects object.

Defaults to

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