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 |
| 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). |