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 | 'metric' | 'range' | false | Controls which parts of the metric range are visible only on hover. true: both the metric line and range area are hidden until hover. 'metric': only the metric line is hidden until hover; the range area is always visible. 'range': only the range area is hidden until hover; the metric line is always visible. false: both are always visible. |
| hoverPoint | boolean | false | Whether to show a hover point on the metric line when the parent line is interactive. |
| 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 |
| lineOpacity | OpacityFacet | {value: 1} | The opacity of the metric line |
| scaleAxisToFit | boolean | false | Whether or not the y-axis should expand to include the entire metric range (if necessary). |