woocommerce/plugins/woocommerce-admin/docs/components/d3chart.md

D3Chart (component)

A simple D3 line and bar chart component for timeseries data in React.

Props

className

• Type: String
• Default: null

Additional CSS classes.

colorScheme

• Type: Function
• Default: null

A chromatic color function to be passed down to d3.

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

height

• Type: Number
• Default: 200

Height of the svg.

interval

• Type: One of: 'hour', 'day', 'week', 'month', 'quarter', 'year'
• Default: null

Interval specification (hourly, daily, weekly etc.)

margin

• Type: Object
  • bottom: Number
  • left: Number
  • right: Number
  • top: Number
• Default: { bottom: 30, left: 40, right: 0, top: 20, }

Margins for axis and chart padding.

mode

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

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

orderedKeys

• Type: Array
• Default: null

The list of labels for 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.

tooltipPosition

• Type: One of: 'below', 'over'
• Default: 'over'

The position where to render the tooltip can be over the chart or below the chart.

tooltipTitle

• Type: String
• Default: null

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

type

• Type: One of: 'bar', 'line'
• Default: 'line'

Chart type of either line or bar.

width

• Type: Number
• Default: 600

Width of the svg.

xFormat

• Type: One of type: string, func
• Default: '%Y-%m-%d'

A datetime formatting string or function, passed to d3TimeFormat.

x2Format

• Type: One of type: string, func
• Default: ''

A datetime formatting string or function, passed to d3TimeFormat.

yFormat

• Type: One of type: string, func
• Default: '.3s'

A number formatting string or function, passed to d3Format.

Legend (component)

A legend specifically designed for the WooCommerce admin charts.

Props

className

• Type: String
• Default: null

Additional CSS classes.

colorScheme

• Type: Function
• Default: null

A chromatic color function to be passed down to d3.

data

• Required
• Type: Array
• Default: null

An array of orderedKeys.

handleLegendToggle

• Type: Function
• Default: null

Handles onClick event.

handleLegendHover

• Type: Function
• Default: null

Handles onMouseEnter/onMouseLeave events.

legendDirection

• Type: One of: 'row', 'column'
• Default: 'row'

Display legend items as a row or column inside a flex-box.

itemsLabel

• Type: String
• Default: null

Label to describe the legend items. It will be displayed in the legend of comparison charts when there are many.

valueType

• Type: String
• Default: null

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