-
Notifications
You must be signed in to change notification settings - Fork 6
MetricRange
c-lamoureux edited this page Nov 2, 2023
·
1 revision
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
.
MetricRanges
s do not get added to the legend. Only the parent marks get added to the legend.
<Chart data={data} >
<Bar>
<MetricRange metricStart="minDataKey" metricEnd="maxDataKey" color="gray-500" />
</Bar>
</Chart>
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). |
@adobe/react-spectrum-charts - Adobe 2024
Chart Components
Supplemental Chart Components
Layout Components