woocommerce/plugins/woocommerce-admin/docs/components/packages/chart.md

`Chart` (component)
===================

A chart container using d3, to display timeseries data with an interactive legend.

Props
-----

### `allowedIntervals`

- Type: Array
- Default: null

Allowed intervals to show in a dropdown.

### `baseValue`

- Type: Number
- Default: `0`

Base chart value. If no data value is different than the baseValue, the
`emptyMessage` will be displayed if provided.

### `chartType`

- Type: One of: 'bar', 'line'
- Default: `'line'`

Chart type of either `line` or `bar`.

### `data`

- Type: Array
- Default: `[]`

An array of data.

### `dateParser`

- Type: String
- Default: `'%Y-%m-%dT%H:%M:%S'`

Format to parse dates into d3 time format

### `emptyMessage`

- Type: String
- Default: null

The message to be displayed if there is no data to render. If no message is provided,
nothing will be displayed.

### `filterParam`

- Type: String
- Default: null

Name of the param used to filter items. If specified, it will be used, in combination
with query, to detect which elements are being used by the current filter and must be
displayed even if their value is 0.

### `itemsLabel`

- Type: String
- Default: null

Label describing the legend items.

### `mode`

- Type: One of: 'item-comparison', 'time-comparison'
- Default: `'time-comparison'`

`item-comparison` (default) or `time-comparison`, this is used to generate correct
ARIA properties.

### `path`

- Type: String
- Default: null

Current path

### `query`

- Type: Object
- Default: null

The query string represented in object form

### `interactiveLegend`

- Type: Boolean
- Default: `true`

Whether the legend items can be activated/deactivated.

### `interval`

- Type: One of: 'hour', 'day', 'week', 'month', 'quarter', 'year'
- Default: `'day'`

Interval specification (hourly, daily, weekly etc).

### `intervalData`

- Type: Object
- Default: null

Information about the currently selected interval, and set of allowed intervals for the chart. See `getIntervalsForQuery`.

### `isRequesting`

- Type: Boolean
- Default: `false`

Render a chart placeholder to signify an in-flight data request.

### `legendPosition`

- Type: One of: 'bottom', 'side', 'top'
- Default: null

Position the legend must be displayed in. If it's not defined, it's calculated
depending on the viewport width and the mode.

### `legendTotals`

- Type: Object
- Default: null

Values to overwrite the legend totals. If not defined, the sum of all line values will be used.

### `screenReaderFormat`

- Type: One of type: string, func
- Default: `'%B %-d, %Y'`

A datetime formatting string or overriding function to format the screen reader labels.

### `showHeaderControls`

- Type: Boolean
- Default: `true`

Wether header UI controls must be displayed.

### `title`

- Type: String
- Default: null

A title describing this chart.

### `tooltipLabelFormat`

- Type: One of type: string, func
- Default: `'%B %-d, %Y'`

A datetime formatting string or overriding function to format the tooltip label.

### `tooltipValueFormat`

- Type: One of type: string, func
- Default: `','`

A number formatting string or function to format the value displayed in the tooltips.

### `tooltipTitle`

- Type: String
- Default: null

A string to use as a title for the tooltip. Takes preference over `tooltipLabelFormat`.

### `valueType`

- Type: String
- Default: null

What type of data is to be displayed? Number, Average, String?

### `xFormat`

- Type: String
- Default: `'%d'`

A datetime formatting string, passed to d3TimeFormat.

### `x2Format`

- Type: String
- Default: `'%b %Y'`

A datetime formatting string, passed to d3TimeFormat.

### `yBelow1Format`

- Type: String
- Default: null

A number formatting string, passed to d3Format.

### `yFormat`

- Type: String
- Default: null

A number formatting string, passed to d3Format.

`ChartPlaceholder` (component)
==============================

`ChartPlaceholder` displays a large loading indiciator for use in place of a `Chart` while data is loading.

Props
-----

### `height`

- Type: Number
- Default: `0`