chart
v2.11.1arrow_drop_down






Chart
A graphical chart.
Usage
import { Chart } from 'grommet';
<Chart />
Properties
a11yTitle
Custom label to be used by screen readers. When provided, an aria-label will be added to the element.
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,
end:
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,
start:
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. 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. Defaults to accent-1
.
string
{
color: string,
opacity:
weak
medium
strong
boolean
}
[{
color: string,
value: number
}]
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
id
A unique identifier for the Chart. This is required if more than one Chart is shown and they use color gradients.
string
onClick
Called when the user clicks on the visualization. Clicking on individual bars or points are handled via values[].onClick for those types of charts.
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
auto
string
}
string
thickness
The width of the stroke. Defaults to medium
.
hair
xsmall
small
medium
large
xlarge
none
string
type
The visual type of chart. Defaults to bar
.
bar
line
area
point
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.color
Color of the Chart. Expects string | {dark: string, light: string}
.
Defaults to
accent-1
chart.extend
Any additional style for the Chart. Expects string | (props) => {}
.
Defaults to
undefined
global.colors
Color options. Expects object
.
Defaults to
{
"accent-1": "#6FFFB0",
"graph-0": "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 object
.
Defaults to
{
strong: 0.8,
medium: 0.4,
weak: 0.1,
}
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%',
}