Line

The Line component is used to display line charts. You can specify the type of data that the line is being trended over with the scaleType prop. You can add Trendlines and MetricRanges as children to show trends in your data or include a ranged area of data in addition to the line. It's also possible to define tooltips and on-click popovers for the line using the ChartTooltip and ChartPopover components respectively as children.

Examples

Line

<Chart data={data}>
	<Axis position='bottom' labelFormat='time' granularity='month' baseline />
	<Axis position='left' grid title="Visitors" />
	<Line metric="visitors" color="browser" />
	<Legend position='top' title='Browser' />
</Chart>

Props

name	type	default	description
children	ChartTooltip | ChartPopover | MetricRange | Trendline	–	Optional elements that can be rendered within the chart.
color	string	'series'	The key in the data that defines what color that line will be. This is not a color value itself but rather the key in the data that will map to the colors scale. For example: A line chart that has a different line and color for each operating system, `color` would be set to the name of the key in the data that defines which operating system it is (color="operatingSystem").
dimension	string	'datetime'	The key in the data that the metric is trended against. This is the x-axis for a standard line chart.
lineType	string | {value: LineType | number[]}	–	If a string is provided, this string is the key in the data that lines will be grouped into series by. Each unique value for this key in the provided data will map to a line type from the lineTypes scale. If an object with a value is provided, this will set the line type for all lines.
metric	string	'value'	The key in the data that is used for the value of the data point.
name	string	–	Line name. Useful for if you need to traverse the chart object to find this line.
onClick	(item: Datum) => void	-	A callback function that will be called when the user clicks on a point on the line. Providing this prop will enable the vertical line rule when hovering and make the mouse cursor a pointer to indicate the chart is interactable.
padding	number	–	Sets the chart area padding. This is a ratio from 0 to 1 for categorical scales (point) and a pixel value for continuous scales (time, linear)
scaleType	'linear' | 'time' | 'point'	'time'	Type of data that the line is trended over. If using 'time', the dimension data must be in milliseconds since Jan 1, 1970 UTC (epoch time). If you are plotting this line along with other marks that are ordinal (ex. bar), then you must use a 'point' scale for the two to line up correctly.
staticPoint	string	–	Key in the data that if it exists and it's value is true, a visible point will be shown on the line for that data item.