woocommerce/plugins/woocommerce-admin/client/components/chart

D3 Chart Component

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

Usage

<Chart
	data={ timeseries }
	dateParser={ '%Y-%m-%d' }
	tooltipFormat={ 'Date is %Y-%m-%d' }
	type={ 'bar' }
	xFormat={ '%d' }
	yFormat={ '.3s' }
/>

Expected Data Format

This component accepts timeseries data prop in the following format (with dates following the ISO 8601 format):

[
	{
		date: '%Y-%m-%d', // string in `dateParser` format (see below)
		category1: { label: 'label', value: value }, // string (optional), number
		category2: { label: 'label', value: value }, // string (optional), number
		...
	},
	...
]

For example:

[
	{
		date: '2018-06-25',
		category1: { label: 'Tooltip label', value: 1234.56 },
		category2: { value: 9876 },
		...
	},
	...
]

Props

Required props are marked with *.

Name	Type	Default	Description
data*	array	none	An array of data as specified above
dateParser	string	%Y-%m-%dT%H:%M:%S	Format to parse datetimes in the data
type*	string	line	Chart type of either line or bar
title	string	none	Chart title
tooltipFormat	string	%B %d, %Y	Title and format of the tooltip title date if tooltipTitle is missing
tooltipTitle	string	``	Title and format of the tooltip title
xFormat	string	%Y-%m-%d	d3TimeFormat of the x-axis values
yFormat	string	.3s	d3Format of the y-axis values