@automattic/charts 1.11.0 → 2.0.0

package/dist/index.css

@@ -49,7 +49,7 @@
 }
 
 .a8ccharts-04TogW-legend-item-value {
-  font-weight: var(--wpds-typography-font-weight-medium, 499);
+  font-weight: var(--wpds-typography-font-weight-emphasis, 499);
   flex-shrink: 0;
 }
 .a8ccharts--zY0xG-tooltip {
@@ -58,7 +58,7 @@
   color: #fff;
   border-radius: var(--wpds-border-radius-md, 4px);
   font-size: var(--wpds-typography-font-size-md, 13px);
-  box-shadow: var(--wpds-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
+  box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
   pointer-events: none;
   position: absolute;
   transform: translate(-50%, -100%);
@@ -99,45 +99,25 @@
   min-width: 0;
   min-height: 0;
 }
-.a8ccharts-y6bXNq-x-zoom__selection {
-  fill: #3858e929;
-  stroke: #3858e9a6;
+.a8ccharts-ur9dWW-x-zoom__selection {
+  fill: var(--a8c-charts-color-zoom-selection, var(--wpds-color-background-interactive-brand-strong, #3858e9));
+  fill-opacity: .16;
+  stroke: var(--a8c-charts-color-zoom-selection-stroke, var(--wpds-color-stroke-interactive-brand, #3858e9));
+  stroke-opacity: .65;
   stroke-width: var(--wpds-border-width-xs, 1px);
   pointer-events: none;
 }
 
-.a8ccharts-y6bXNq-x-zoom__reset {
+.a8ccharts-ur9dWW-x-zoom__reset {
   top: var(--wpds-dimension-gap-sm, 8px);
   right: var(--wpds-dimension-gap-sm, 8px);
   z-index: 2;
-  width: 28px;
-  height: 28px;
-  color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
-  border: var(--wpds-border-width-xs, 1px) solid #00000029;
-  border-radius: var(--wpds-border-radius-md, 4px);
-  cursor: pointer;
-  box-shadow: var(--wpds-elevation-xs, 0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003);
-  background: #ffffffeb;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  display: inline-flex;
+  box-shadow: var(--a8c-charts-elevation-xs, 0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003);
   position: absolute;
 }
 
-.a8ccharts-y6bXNq-x-zoom__reset:hover {
-  background: #fff;
-}
-
-.a8ccharts-y6bXNq-x-zoom__reset:focus-visible {
-  outline: 2px solid var(--a8c-charts-color-focus, var(--wpds-color-stroke-focus, #3858e9));
-  outline-offset: 1px;
-}
-
-.a8ccharts-y6bXNq-x-zoom__reset-icon {
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
+.a8ccharts-ur9dWW-x-zoom__reset:not(:hover, :active, :focus) {
+  background-color: var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
 }
 .a8ccharts-inuQka-line-chart {
   position: relative;
@@ -160,7 +140,7 @@
 }
 
 .a8ccharts-inuQka-line-chart__tooltip-date {
-  font-weight: var(--wpds-typography-font-weight-medium, 499);
+  font-weight: var(--wpds-typography-font-weight-emphasis, 499);
   padding-bottom: var(--wpds-dimension-padding-md, 12px);
 }
 
@@ -169,7 +149,7 @@
 }
 
 .a8ccharts-inuQka-line-chart__tooltip-label {
-  font-weight: var(--wpds-typography-font-weight-medium, 499);
+  font-weight: var(--wpds-typography-font-weight-emphasis, 499);
   padding-right: var(--wpds-dimension-padding-lg, 16px);
 }
 
@@ -200,7 +180,7 @@
   border-radius: var(--wpds-border-radius-md, 4px);
   min-width: 125px;
   font-size: var(--wpds-typography-font-size-md, 13px);
-  box-shadow: var(--wpds-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
+  box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
   margin: var(--wpds-dimension-gap-sm, 8px);
   visibility: hidden;
   border: none;
@@ -304,7 +284,7 @@
   text-overflow: ellipsis;
   font-size: var(--wpds-typography-font-size-xl, 18px);
   font-style: normal;
-  font-weight: var(--wpds-typography-font-weight-medium, 499);
+  font-weight: var(--wpds-typography-font-weight-emphasis, 499);
   line-height: var(--wpds-typography-line-height-sm, 20px);
   margin: 0;
   overflow: hidden;
@@ -314,7 +294,7 @@
   text-overflow: ellipsis;
   font-size: var(--wpds-typography-font-size-md, 13px);
   font-style: normal;
-  font-weight: var(--wpds-typography-font-weight-medium, 499);
+  font-weight: var(--wpds-typography-font-weight-emphasis, 499);
   line-height: var(--wpds-typography-line-height-sm, 20px);
   margin: 0;
   overflow: hidden;
@@ -343,7 +323,7 @@
 .a8ccharts-mGEVca-step-label {
   color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
   font-size: var(--wpds-typography-font-size-sm, 12px);
-  font-weight: var(--wpds-typography-font-weight-regular, 400);
+  font-weight: var(--wpds-typography-font-weight-default, 400);
   line-height: var(--wpds-typography-line-height-xs, 16px);
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -353,7 +333,7 @@
 .a8ccharts-mGEVca-step-rate {
   color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   font-size: var(--wpds-typography-font-size-md, 13px);
-  font-weight: var(--wpds-typography-font-weight-medium, 499);
+  font-weight: var(--wpds-typography-font-weight-emphasis, 499);
   line-height: var(--wpds-typography-line-height-xs, 16px);
 }
 
@@ -387,14 +367,14 @@
   background: var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
   border-radius: var(--wpds-border-radius-md, 4px) !important;
   padding: var(--wpds-dimension-padding-md, 12px) !important;
-  box-shadow: var(--wpds-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005) !important;
+  box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005) !important;
 }
 
 .a8ccharts-mGEVca-tooltip-title {
   color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   font-size: var(--wpds-typography-font-size-sm, 12px);
   font-style: normal;
-  font-weight: var(--wpds-typography-font-weight-regular, 400);
+  font-weight: var(--wpds-typography-font-weight-default, 400);
   line-height: var(--wpds-typography-line-height-xs, 16px);
 }
 
@@ -402,7 +382,7 @@
   color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   font-size: var(--wpds-typography-font-size-md, 13px);
   font-style: normal;
-  font-weight: var(--wpds-typography-font-weight-medium, 499);
+  font-weight: var(--wpds-typography-font-weight-emphasis, 499);
   line-height: var(--wpds-typography-line-height-sm, 20px);
 }
 
@@ -709,7 +689,7 @@
 }
 
 .a8ccharts-YtTOxW-pie-semi-circle-chart .a8ccharts-YtTOxW-label {
-  font-weight: var(--wpds-typography-font-weight-medium, 499);
+  font-weight: var(--wpds-typography-font-weight-emphasis, 499);
   font-size: var(--wpds-typography-font-size-lg, 16px);
 }
 
@@ -736,7 +716,7 @@
 }
 .a8ccharts-zR7F7G-trend-indicator {
   font-size: var(--wpds-typography-font-size-md, 13px);
-  font-weight: var(--wpds-typography-font-weight-medium, 499);
+  font-weight: var(--wpds-typography-font-weight-emphasis, 499);
   align-items: center;
   gap: .125em;
   line-height: 1;

package/dist/index.d.cts

@@ -347,6 +347,11 @@ type CompleteChartTheme = Required<ChartTheme> & {
   };
   heatmapChart: Omit<Required<NonNullable<ChartTheme['heatmapChart']>>, 'primaryColor'> & Pick<NonNullable<ChartTheme['heatmapChart']>, 'primaryColor'>;
 };
+/**
+ * Bucket resolution of time-series data, as known by the caller (e.g. a
+ * granularity selector), for consumers that don't need to infer it.
+ */
+type TickResolution = 'hour' | 'day' | 'week' | 'month' | 'year';
 type AxisOptions = {
   orientation?: OrientationType;
   numTicks?: number;
@@ -360,6 +365,15 @@ type AxisOptions = {
   labelClassName?: string;
   tickClassName?: string;
   tickFormat?: TickFormatter<ScaleInput<AxisScale>>;
+  /**
+   * Bucket resolution of the data on a time x-axis. When set, the automatic
+   * tick formatter derives tick formats from it directly instead of
+   * inferring the resolution from point spacing. The overall time span still
+   * constrains the choice — e.g. hourly buckets spanning more than a week
+   * get date ticks, since hour ticks would be unreadable at that span.
+   * Ignored when `tickFormat` is set.
+   */
+  tickResolution?: TickResolution;
   /**
    * Whether to display this axis. Defaults to true.
    */
@@ -481,6 +495,21 @@ type ChartLegendConfig<T = DataPoint | DataPointDate | LeaderboardEntry> = {
    */
   shapeStyles?: LegendShapeStyles;
 };
+/**
+ * Legend config for charts built from `SeriesData` (line, bar, area). Adds `collapseGroups` on top
+ * of the shared config. It is intentionally absent from the base `ChartLegendConfig` so point-based
+ * charts (pie, semi-circle pie) — whose data points carry `group` only to coordinate colours — can't
+ * set it.
+ */
+type SeriesChartLegendConfig = ChartLegendConfig<SeriesData[]> & {
+  /**
+   * Collapse series that share a `group` into a single legend item, labelled by the group's
+   * primary series (its first non-comparison member). Off by default, so every series keeps its
+   * own item. Combines with `interactive`: a collapsed item toggles every series in its group, an
+   * uncollapsed one toggles only its own.
+   */
+  collapseGroups?: boolean;
+};
 /**
  * Base properties shared across all chart components
  */
@@ -644,6 +673,12 @@ type BaseLegendItem = {
   glyphSize?: number;
   renderGlyph?: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;
   shapeStyle?: CSSProperties & LineStyles$1;
+  /**
+   * The series labels this legend item controls. For a grouped item this is every series
+   * sharing the group (primary first); for a single series it is just its own label. Used by
+   * the interactive legend to toggle a whole group's visibility from one item.
+   */
+  seriesLabels?: string[];
 };
 //#endregion
 //#region src/components/legend/legend.d.ts
@@ -661,6 +696,11 @@ interface ChartLegendOptions {
   showValues?: boolean;
   legendValueDisplay?: LegendValueDisplay;
   legendShape?: LegendShape<SeriesData[], number>;
+  /**
+   * Collapse series that share a `group` into a single legend item, labelled by the group's
+   * primary series. Off by default, so every series gets its own item.
+   */
+  collapseGroups?: boolean;
 }
 /**
  * Hook to transform chart data into legend items
@@ -736,6 +776,10 @@ type RenderLineGlyphProps<Datum extends object> = GlyphProps<Datum> & {
   position?: 'start' | 'end';
 };
 interface LineChartProps extends BaseChartProps<SeriesData[]> {
+  /**
+   * Legend configuration. Supports `collapseGroups` on top of the shared options.
+   */
+  legend?: SeriesChartLegendConfig;
   withGradientFill: boolean;
   smoothing?: boolean;
   curveType?: CurveType;
@@ -755,6 +799,15 @@ interface LineChartProps extends BaseChartProps<SeriesData[]> {
    * button appears in the top-right of the chart while zoomed.
    */
   zoomable?: boolean;
+  /**
+   * Whether the Y axis rescales to fit only the visible series when series are
+   * hidden or shown through the interactive legend.
+   * Defaults to `true` (the pre-existing behaviour). Set to `false` to pin the Y
+   * axis to the full data extent so hiding series does not move the chart's
+   * baseline — useful for comparison charts. Matches `AreaChart`.
+   * @default true
+   */
+  rescaleYOnVisibilityChange?: boolean;
   children?: ReactNode;
 }
 type TooltipDatum = {
@@ -764,6 +817,10 @@ type TooltipDatum = {
 //#endregion
 //#region src/charts/area-chart/types.d.ts
 interface AreaChartProps extends BaseChartProps<SeriesData[]> {
+  /**
+   * Legend configuration. Supports `collapseGroups` on top of the shared options.
+   */
+  legend?: SeriesChartLegendConfig;
   /**
    * Whether series should be stacked on top of each other.
    * When false, series are rendered as overlapping filled areas.
@@ -814,13 +871,18 @@ interface AreaChartProps extends BaseChartProps<SeriesData[]> {
    */
   zoomable?: boolean;
   /**
-   * When using an interactive legend, controls whether the Y axis rescales
-   * to fit only the visible series. Defaults to `true`, matching the
-   * intuitive default for LineChart and BarChart. Set to `false` to pin
-   * the Y axis to the full data extent so toggling legend items off does
-   * not move the chart's baseline.
+   * Whether the Y axis rescales to fit only the visible series when series are
+   * hidden or shown through the interactive legend.
+   * Defaults to `true`, matching LineChart. Set to `false` to pin the Y axis to
+   * the full data extent so hiding series does not move the chart's baseline.
    * @default true
    */
+  rescaleYOnVisibilityChange?: boolean;
+  /**
+   * @deprecated Use `rescaleYOnVisibilityChange`. The behaviour keys off series
+   * visibility changing, not specifically a legend toggle. Still honoured when
+   * `rescaleYOnVisibilityChange` is not set.
+   */
   rescaleYOnLegendToggle?: boolean;
   children?: ReactNode;
 }
@@ -859,6 +921,10 @@ declare const AreaChartResponsive: AreaChartResponsiveComponent;
 //#endregion
 //#region src/charts/bar-chart/bar-chart.d.ts
 interface BarChartProps extends BaseChartProps<SeriesData[]> {
+  /**
+   * Legend configuration. Supports `collapseGroups` on top of the shared options.
+   */
+  legend?: SeriesChartLegendConfig;
   renderTooltip?: (params: RenderTooltipParams<DataPointDate>) => ReactNode;
   orientation?: 'horizontal' | 'vertical';
   withPatterns?: boolean;
@@ -2008,5 +2074,5 @@ declare const useGlobalChartsTheme: () => CompleteChartTheme;
  */
 declare const defaultTheme: CompleteChartTheme;
 //#endregion
-export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type CalendarHeatmapResult, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, type GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridProps, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesData, type SeriesDataOptions, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TooltipData, type TooltipDatum, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, type XyChartTooltipProps, buildCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, prefersLightText, relativeLuminance, useChartLegendItems, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
+export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type CalendarHeatmapResult, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, type GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridProps, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesChartLegendConfig, type SeriesData, type SeriesDataOptions, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, type TooltipData, type TooltipDatum, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, type XyChartTooltipProps, buildCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, prefersLightText, relativeLuminance, useChartLegendItems, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.ts

@@ -347,6 +347,11 @@ type CompleteChartTheme = Required<ChartTheme> & {
   };
   heatmapChart: Omit<Required<NonNullable<ChartTheme['heatmapChart']>>, 'primaryColor'> & Pick<NonNullable<ChartTheme['heatmapChart']>, 'primaryColor'>;
 };
+/**
+ * Bucket resolution of time-series data, as known by the caller (e.g. a
+ * granularity selector), for consumers that don't need to infer it.
+ */
+type TickResolution = 'hour' | 'day' | 'week' | 'month' | 'year';
 type AxisOptions = {
   orientation?: OrientationType;
   numTicks?: number;
@@ -360,6 +365,15 @@ type AxisOptions = {
   labelClassName?: string;
   tickClassName?: string;
   tickFormat?: TickFormatter<ScaleInput<AxisScale>>;
+  /**
+   * Bucket resolution of the data on a time x-axis. When set, the automatic
+   * tick formatter derives tick formats from it directly instead of
+   * inferring the resolution from point spacing. The overall time span still
+   * constrains the choice — e.g. hourly buckets spanning more than a week
+   * get date ticks, since hour ticks would be unreadable at that span.
+   * Ignored when `tickFormat` is set.
+   */
+  tickResolution?: TickResolution;
   /**
    * Whether to display this axis. Defaults to true.
    */
@@ -481,6 +495,21 @@ type ChartLegendConfig<T = DataPoint | DataPointDate | LeaderboardEntry> = {
    */
   shapeStyles?: LegendShapeStyles;
 };
+/**
+ * Legend config for charts built from `SeriesData` (line, bar, area). Adds `collapseGroups` on top
+ * of the shared config. It is intentionally absent from the base `ChartLegendConfig` so point-based
+ * charts (pie, semi-circle pie) — whose data points carry `group` only to coordinate colours — can't
+ * set it.
+ */
+type SeriesChartLegendConfig = ChartLegendConfig<SeriesData[]> & {
+  /**
+   * Collapse series that share a `group` into a single legend item, labelled by the group's
+   * primary series (its first non-comparison member). Off by default, so every series keeps its
+   * own item. Combines with `interactive`: a collapsed item toggles every series in its group, an
+   * uncollapsed one toggles only its own.
+   */
+  collapseGroups?: boolean;
+};
 /**
  * Base properties shared across all chart components
  */
@@ -644,6 +673,12 @@ type BaseLegendItem = {
   glyphSize?: number;
   renderGlyph?: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;
   shapeStyle?: CSSProperties & LineStyles$1;
+  /**
+   * The series labels this legend item controls. For a grouped item this is every series
+   * sharing the group (primary first); for a single series it is just its own label. Used by
+   * the interactive legend to toggle a whole group's visibility from one item.
+   */
+  seriesLabels?: string[];
 };
 //#endregion
 //#region src/components/legend/legend.d.ts
@@ -661,6 +696,11 @@ interface ChartLegendOptions {
   showValues?: boolean;
   legendValueDisplay?: LegendValueDisplay;
   legendShape?: LegendShape<SeriesData[], number>;
+  /**
+   * Collapse series that share a `group` into a single legend item, labelled by the group's
+   * primary series. Off by default, so every series gets its own item.
+   */
+  collapseGroups?: boolean;
 }
 /**
  * Hook to transform chart data into legend items
@@ -736,6 +776,10 @@ type RenderLineGlyphProps<Datum extends object> = GlyphProps<Datum> & {
   position?: 'start' | 'end';
 };
 interface LineChartProps extends BaseChartProps<SeriesData[]> {
+  /**
+   * Legend configuration. Supports `collapseGroups` on top of the shared options.
+   */
+  legend?: SeriesChartLegendConfig;
   withGradientFill: boolean;
   smoothing?: boolean;
   curveType?: CurveType;
@@ -755,6 +799,15 @@ interface LineChartProps extends BaseChartProps<SeriesData[]> {
    * button appears in the top-right of the chart while zoomed.
    */
   zoomable?: boolean;
+  /**
+   * Whether the Y axis rescales to fit only the visible series when series are
+   * hidden or shown through the interactive legend.
+   * Defaults to `true` (the pre-existing behaviour). Set to `false` to pin the Y
+   * axis to the full data extent so hiding series does not move the chart's
+   * baseline — useful for comparison charts. Matches `AreaChart`.
+   * @default true
+   */
+  rescaleYOnVisibilityChange?: boolean;
   children?: ReactNode;
 }
 type TooltipDatum = {
@@ -764,6 +817,10 @@ type TooltipDatum = {
 //#endregion
 //#region src/charts/area-chart/types.d.ts
 interface AreaChartProps extends BaseChartProps<SeriesData[]> {
+  /**
+   * Legend configuration. Supports `collapseGroups` on top of the shared options.
+   */
+  legend?: SeriesChartLegendConfig;
   /**
    * Whether series should be stacked on top of each other.
    * When false, series are rendered as overlapping filled areas.
@@ -814,13 +871,18 @@ interface AreaChartProps extends BaseChartProps<SeriesData[]> {
    */
   zoomable?: boolean;
   /**
-   * When using an interactive legend, controls whether the Y axis rescales
-   * to fit only the visible series. Defaults to `true`, matching the
-   * intuitive default for LineChart and BarChart. Set to `false` to pin
-   * the Y axis to the full data extent so toggling legend items off does
-   * not move the chart's baseline.
+   * Whether the Y axis rescales to fit only the visible series when series are
+   * hidden or shown through the interactive legend.
+   * Defaults to `true`, matching LineChart. Set to `false` to pin the Y axis to
+   * the full data extent so hiding series does not move the chart's baseline.
    * @default true
    */
+  rescaleYOnVisibilityChange?: boolean;
+  /**
+   * @deprecated Use `rescaleYOnVisibilityChange`. The behaviour keys off series
+   * visibility changing, not specifically a legend toggle. Still honoured when
+   * `rescaleYOnVisibilityChange` is not set.
+   */
   rescaleYOnLegendToggle?: boolean;
   children?: ReactNode;
 }
@@ -859,6 +921,10 @@ declare const AreaChartResponsive: AreaChartResponsiveComponent;
 //#endregion
 //#region src/charts/bar-chart/bar-chart.d.ts
 interface BarChartProps extends BaseChartProps<SeriesData[]> {
+  /**
+   * Legend configuration. Supports `collapseGroups` on top of the shared options.
+   */
+  legend?: SeriesChartLegendConfig;
   renderTooltip?: (params: RenderTooltipParams<DataPointDate>) => ReactNode;
   orientation?: 'horizontal' | 'vertical';
   withPatterns?: boolean;
@@ -2008,5 +2074,5 @@ declare const useGlobalChartsTheme: () => CompleteChartTheme;
  */
 declare const defaultTheme: CompleteChartTheme;
 //#endregion
-export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type CalendarHeatmapResult, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, type GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridProps, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesData, type SeriesDataOptions, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TooltipData, type TooltipDatum, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, type XyChartTooltipProps, buildCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, prefersLightText, relativeLuminance, useChartLegendItems, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
+export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type CalendarHeatmapResult, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartError, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, type GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridProps, type GridStyles, type HeatmapCell, HeatmapChartResponsive as HeatmapChart, type HeatmapChartProps, HeatmapChart as HeatmapChartUnresponsive, type HeatmapColumn, type HeatmapTooltipData, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShape, type LegendShapeLabel, type LegendShapeRenderProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesChartLegendConfig, type SeriesData, type SeriesDataOptions, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TickResolution, type TooltipData, type TooltipDatum, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, type XyChartTooltipProps, buildCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, prefersLightText, relativeLuminance, useChartLegendItems, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
 //# sourceMappingURL=index.d.ts.map