The Grommet Chart components provide the building blocks to construct a variety of Chart visualizations.

Basics

All charts start with a Base which provides a foundation area within a Chart that defines the screen region where any drawing should take place. Any drawing components, such as Line and Threshold, are contained in Layers within the Chart. The Layers are automtically positioned over the Base. The Chart can also contain Axis running along any edge. A simple line chart could be built via:

<Chart>
  <Axis vertical={true}
    count={3}
    ticks={true} />
  <Base />
  <Layers>
    <Line values={[70, 0, 20, 100, 60]} />
  </Layers>
</Chart>

The Base can contain other non-Chart components, like Meter. A simple Meter based chart could be built via:

<Chart a11yTitle='Chart representing number of commits in the last three days.'>
  <Axis vertical={true}
    count={3}
    ticks={true} />
  <Base>
    <Meter vertical={true}
      value={70} />
    <Meter vertical={true}
      value={20} />
    <Meter vertical={true}
      value={60} />
  </Base>
</Chart>

Interaction

For charts using Meter, use the interaction properties of Meter to handle user interaction. For Line, Area, or Bar charts, you can use the HotSpots or Range components to handle user interaction with the chart. In either case, you can use these to update Value or Legend components surrounding the chart. Note that you can use Legend and Value within MarkerLegend to have them positioned relative to the appropriate part of the chart graphic.

Components

Properties

full true|false
Whether to occupy the full parent width.
horizontalAlignWith {string}
The id of the DOM element to align the Chart graphics with horizontally. This can be used if the Chart has a Base descendant with children that do not occupy the full width of the Base. For example, if the Base contains Boxes that are laid out horizontally and include Meters and Values, you would give a Meter an id and set this property to use it.
loading true|false
Whether the Chart data is still being retrieved.
onMaxCount {function (maxCount)}
This function is called to provide guidance on how many data points the Chart could handle. For instance, if the Chart width is variable based on its parent width, the maxCount can be used to set both the number of data points, ticks, and/or labels to include.
vertical true|false
Whether the child components should be laid out vertically. If you want both an x-axis and y-axis, you would have two Chart components, one inside the other, with only one of them having vertical=true
verticalAlignWith {string}
The id of the DOM element to align the Chart graphics with vertically. This can be used if the Chart has a Base descendant with children that do not occupy the full width of the Base. For example, if the Base contains Boxes that are laid out vertically and include Meters and Values, you would give a Meter an id and set this property to use it.