MetricRange

The MetricRange component is used to add a custom area mark onto visualizations. MetricRange is only supported for Line components. When creating a MetricRange you define a metricStart and metricEnd for the range that controls the area of the chart it will cover. You can also provide a Metric to create an additional line within the MetricRange. This metric line is not a Trendline and will only display with the data you provide to the Chart.

MetricRangess do not get added to the legend. Only the parent marks get added to the legend.

Examples

Average line on a bar chart

<Chart data={data} >
    <Bar>
        <MetricRange metricStart="minDataKey" metricEnd="maxDataKey" color="gray-500"  />
    </Bar>
</Chart>

Props

name	type	default	description
children	ChartTooltip	–	Tooltip to be display when hovering over the metric range.
color	SpectrumColor | CssColor	–	The line color of the metric range. If undefined, will default to the color of the series that it represents.
displayOnHover	boolean	false	Whether the metric range should only be visible when hovering over the parent line.
lineType	'solid' | 'dashed' | 'dotted' | 'dotDash' | 'shortDash' | 'longDash' | 'twoDash' | number[]	'dashed'	If a metric is provided, defines the line type of the metric line.
lineWidth	'XS' | 'S' | 'M' | 'L' | 'XL' | number	'S'	If a metric is provided, defines the width of the metric line.
metric	string	'value'	The key for the metric value in the data.
metricEnd	string	-	The key for the upper range in the data.
metricStart	string	-	The key for the lower range in the data.
rangeOpacity	number	0.8	The opacity of the metric range
scaleAxisToFit	boolean	false	Whether or not the y-axis should expand to include the entire metric range (if necessary).