@automattic/charts 0.25.0 → 0.26.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.26.0] - 2025-08-14
+### Added
+- Bar Chart: Add composition API. [#44771]
+- Line Chart: Add composition legends. [#44691]
+- Line Chart: Add comparison style to theme. [#44676]
+
+### Changed
+- Updated legend positioning and alignment. [#44747]
+- Update package dependencies. [#44701]
+
 ## [0.25.0] - 2025-08-11
 ### Added
 - Add internationalization. [#44652]
@@ -361,6 +371,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed lints following ESLint rule changes for TS [#40584]
 - Fixing a bug in Chart storybook data. [#40640]
 
+[0.26.0]: https://github.com/Automattic/charts/compare/v0.25.0...v0.26.0
 [0.25.0]: https://github.com/Automattic/charts/compare/v0.24.0...v0.25.0
 [0.24.0]: https://github.com/Automattic/charts/compare/v0.23.1...v0.24.0
 [0.23.1]: https://github.com/Automattic/charts/compare/v0.23.0...v0.23.1

package/dist/cjs/components/bar-chart/bar-chart.js

@@ -8,12 +8,14 @@ var xychart = require('@visx/xychart');
 var i18n = require('@wordpress/i18n');
 var clsx = require('clsx');
 var react = require('react');
-var chartContext = require('../../providers/chart-context/chart-context.js');
+var globalChartsProvider = require('../../providers/chart-context/global-charts-provider.js');
 var utils = require('../../providers/chart-context/utils.js');
 var themeProvider = require('../../providers/theme/theme-provider.js');
+var createComposition = require('../../utils/create-composition.js');
 var legend = require('../legend/legend.js');
 require('../legend/base-legend.js');
 var useChartLegendData = require('../legend/use-chart-legend-data.js');
+var singleChartContext = require('../shared/single-chart-context.js');
 var useChartDataTransform = require('../shared/use-chart-data-transform.js');
 var useChartMargin = require('../shared/use-chart-margin.js');
 var useElementHeight = require('../shared/use-element-height.js');
@@ -37,7 +39,7 @@ const validateData = (data) => {
     return null;
 };
 const getPatternId = (chartId, index) => `bar-pattern-${chartId}-${index}`;
-const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400, className, margin, withTooltips = false, showLegend = false, legendOrientation = 'horizontal', legendAlignmentHorizontal = 'center', legendAlignmentVertical = 'bottom', legendShape = 'rect', gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = 'vertical', withPatterns = false, showZeroValues = false, }) => {
+const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400, className, margin, withTooltips = false, showLegend = false, legendOrientation = 'horizontal', legendPosition = 'bottom', legendAlignment = 'center', legendShape = 'rect', gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = 'vertical', withPatterns = false, showZeroValues = false, children, }) => {
     const horizontal = orientation === 'horizontal';
     const chartId = utils.useChartId(providedChartId);
     const providerTheme = themeProvider.useChartTheme();
@@ -150,29 +152,40 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400,
     }
     const gridVisibility = gridVisibilityProp ?? chartOptions.gridVisibility;
     const highlightedBarStyle = createKeyboardHighlightStyle();
-    return (jsxRuntime.jsxs("div", { className: clsx('bar-chart', barChart_module.default['bar-chart'], className), "data-testid": "bar-chart", role: "grid", "aria-label": i18n.__('Bar chart', 'jetpack-charts'), style: {
-            width,
-            height,
-            display: 'flex',
-            flexDirection: showLegend && legendAlignmentVertical === 'top' ? 'column-reverse' : 'column',
-        }, tabIndex: 0, onKeyDown: onChartKeyDown, onFocus: onChartFocus, onBlur: onChartBlur, ref: chartRef, "data-chart-id": `bar-chart-${chartId}`, children: [jsxRuntime.jsxs(xychart.XYChart, { theme: theme, width: width, height: height - (showLegend ? legendHeight : 0), margin: {
-                    ...defaultMargin,
-                    ...margin,
-                    ...(showLegend && legendAlignmentVertical === 'top'
-                        ? { top: (defaultMargin.top || 0) + legendHeight }
-                        : {}),
-                }, xScale: chartOptions.xScale, yScale: chartOptions.yScale, horizontal: horizontal, pointerEventsDataKey: "nearest", children: [jsxRuntime.jsx(xychart.Grid, { columns: gridVisibility.includes('y'), rows: gridVisibility.includes('x'), numTicks: 4 }), withPatterns && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("defs", { "data-testid": "bar-chart-patterns", children: dataSorted.map((seriesData, index) => renderPattern(index, getColor(seriesData, index))) }), jsxRuntime.jsx("style", { children: dataSorted.map((seriesData, index) => createPatternBorderStyle(index, getColor(seriesData, index))) })] })), highlightedBarStyle && jsxRuntime.jsx("style", { children: highlightedBarStyle }), jsxRuntime.jsx(xychart.BarGroup, { padding: chartOptions.barGroup.padding, children: dataWithVisibleZeros.map((seriesData, index) => (jsxRuntime.jsx(xychart.BarSeries, { dataKey: seriesData?.label, data: seriesData.data, yAccessor: chartOptions.accessors.yAccessor, xAccessor: chartOptions.accessors.xAccessor, colorAccessor: getBarBackground(index) }, seriesData?.label))) }), jsxRuntime.jsx(xychart.Axis, { ...chartOptions.axis.x }), jsxRuntime.jsx(xychart.Axis, { ...chartOptions.axis.y }), withTooltips && (jsxRuntime.jsx(accessibleTooltip.AccessibleTooltip, { detectBounds: true, snapTooltipToDatumX: true, snapTooltipToDatumY: true, renderTooltip: renderTooltip || renderDefaultTooltip, selectedIndex: selectedIndex, tooltipRef: tooltipRef, keyboardFocusedClassName: barChart_module.default['bar-chart__tooltip--keyboard-focused'], series: data, mode: "individual" }))] }), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, alignmentHorizontal: legendAlignmentHorizontal, alignmentVertical: legendAlignmentVertical, className: barChart_module.default['bar-chart__legend'], shape: legendShape, ref: legendRef, chartId: chartId }))] }));
+    return (jsxRuntime.jsx(singleChartContext.SingleChartContext.Provider, { value: {
+            chartId,
+            chartWidth: width,
+            chartHeight: height - (showLegend ? legendHeight : 0),
+        }, children: jsxRuntime.jsxs("div", { className: clsx('bar-chart', barChart_module.default['bar-chart'], className), "data-testid": "bar-chart", role: "grid", "aria-label": i18n.__('Bar chart', 'jetpack-charts'), style: {
+                width,
+                height,
+                display: 'flex',
+                flexDirection: showLegend && legendPosition === 'top' ? 'column-reverse' : 'column',
+            }, tabIndex: 0, onKeyDown: onChartKeyDown, onFocus: onChartFocus, onBlur: onChartBlur, ref: chartRef, "data-chart-id": `bar-chart-${chartId}`, children: [jsxRuntime.jsxs(xychart.XYChart, { theme: theme, width: width, height: height - (showLegend ? legendHeight : 0), margin: {
+                        ...defaultMargin,
+                        ...margin,
+                        ...(showLegend && legendPosition === 'top'
+                            ? { top: (defaultMargin.top || 0) + legendHeight }
+                            : {}),
+                    }, xScale: chartOptions.xScale, yScale: chartOptions.yScale, horizontal: horizontal, pointerEventsDataKey: "nearest", children: [jsxRuntime.jsx(xychart.Grid, { columns: gridVisibility.includes('y'), rows: gridVisibility.includes('x'), numTicks: 4 }), withPatterns && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("defs", { "data-testid": "bar-chart-patterns", children: dataSorted.map((seriesData, index) => renderPattern(index, getColor(seriesData, index))) }), jsxRuntime.jsx("style", { children: dataSorted.map((seriesData, index) => createPatternBorderStyle(index, getColor(seriesData, index))) })] })), highlightedBarStyle && jsxRuntime.jsx("style", { children: highlightedBarStyle }), jsxRuntime.jsx(xychart.BarGroup, { padding: chartOptions.barGroup.padding, children: dataWithVisibleZeros.map((seriesData, index) => (jsxRuntime.jsx(xychart.BarSeries, { dataKey: seriesData?.label, data: seriesData.data, yAccessor: chartOptions.accessors.yAccessor, xAccessor: chartOptions.accessors.xAccessor, colorAccessor: getBarBackground(index) }, seriesData?.label))) }), jsxRuntime.jsx(xychart.Axis, { ...chartOptions.axis.x }), jsxRuntime.jsx(xychart.Axis, { ...chartOptions.axis.y }), withTooltips && (jsxRuntime.jsx(accessibleTooltip.AccessibleTooltip, { detectBounds: true, snapTooltipToDatumX: true, snapTooltipToDatumY: true, renderTooltip: renderTooltip || renderDefaultTooltip, selectedIndex: selectedIndex, tooltipRef: tooltipRef, keyboardFocusedClassName: barChart_module.default['bar-chart__tooltip--keyboard-focused'], series: data, mode: "individual" }))] }), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, position: legendPosition, alignment: legendAlignment, className: barChart_module.default['bar-chart__legend'], shape: legendShape, ref: legendRef, chartId: chartId })), children] }) }));
 };
-const BarChart = props => {
-    const existingContext = react.useContext(chartContext.ChartContext);
-    // If we're already in a ChartProvider context, don't create a new one
+const BarChartWithProvider = props => {
+    const existingContext = react.useContext(globalChartsProvider.GlobalChartsContext);
+    // If we're already in a GlobalChartsProvider context, don't create a new one
     if (existingContext) {
         return jsxRuntime.jsx(BarChartInternal, { ...props });
     }
-    // Otherwise, create our own ChartProvider
-    return (jsxRuntime.jsx(chartContext.ChartProvider, { children: jsxRuntime.jsx(BarChartInternal, { ...props }) }));
+    // Otherwise, create our own GlobalChartsProvider
+    return (jsxRuntime.jsx(globalChartsProvider.GlobalChartsProvider, { children: jsxRuntime.jsx(BarChartInternal, { ...props }) }));
 };
-BarChart.displayName = 'BarChart';
-var BarChart$1 = withResponsive.withResponsive(BarChart);
+BarChartWithProvider.displayName = 'BarChart';
+// Create BarChart with composition API
+createComposition.attachSubComponents(BarChartWithProvider, {
+    Legend: legend.Legend,
+});
+// Create responsive BarChart with composition API
+const BarChartResponsive = createComposition.attachSubComponents(withResponsive.withResponsive(BarChartWithProvider), {
+    Legend: legend.Legend,
+});
 
-exports.default = BarChart$1;
+exports.default = BarChartResponsive;

package/dist/cjs/components/legend/base-legend.js

@@ -18,7 +18,7 @@ const orientationToFlexDirection = {
  * Base legend component that displays color-coded items with labels based on visx LegendOrdinal.
  * We avoid using LegendOrdinal directly to enable support for advanced features such as interactivity.
  */
-const BaseLegend = react.forwardRef(({ items, className, orientation = 'horizontal', alignmentHorizontal = 'center', alignmentVertical = 'bottom', shape = 'rect', fill = utils.valueOrIdentityString, size = utils.valueOrIdentityString, labelFormat = utils.valueOrIdentity, labelTransform = utils.labelTransformFactory, shapeWidth = 16, shapeHeight = 16, shapeMargin = '2px 4px 2px 0', labelAlign = 'left', labelFlex = '0 0 auto', // Use natural width instead of expanding to fill space
+const BaseLegend = react.forwardRef(({ items, className, orientation = 'horizontal', position = 'bottom', alignment = 'center', shape = 'rect', fill = utils.valueOrIdentityString, size = utils.valueOrIdentityString, labelFormat = utils.valueOrIdentity, labelTransform = utils.labelTransformFactory, shapeWidth = 16, shapeHeight = 16, shapeMargin = '2px 4px 2px 0', labelAlign = 'left', labelFlex = '0 0 auto', // Use natural width instead of expanding to fill space
 labelMargin = '0 4px', itemMargin = '0', itemDirection = 'row', legendLabelProps, ...legendItemProps }, ref) => {
     const theme = themeProvider.useChartTheme();
     const legendScale = scale.scaleOrdinal({
@@ -27,15 +27,11 @@ labelMargin = '0 4px', itemMargin = '0', itemDirection = 'row', legendLabelProps
     });
     const domain = legendScale.domain();
     // For right-aligned vertical legends, use row-reverse to align text consistently
-    const getShapeStyle = react.useCallback(({ index }) => {
-        return items[index]?.shapeStyle ?? theme.legendShapeStyles?.[index] ?? {};
-    }, [items, theme]);
-    return (jsxRuntime.jsx(legend.LegendOrdinal, { scale: legendScale, labelFormat: labelFormat, labelTransform: labelTransform, children: labels => (jsxRuntime.jsx("div", { ref: ref, role: "list", "data-testid": `legend-${orientation}`, className: clsx(legend_module.default.legend, legend_module.default[`legend--${orientation}`], legend_module.default[`legend--horizontal-align-${alignmentHorizontal}`], legend_module.default[`legend--vertical-align-${alignmentVertical}`], className), style: {
+    const getShapeStyle = react.useCallback(({ index }) => items[index]?.shapeStyle, [items]);
+    return (jsxRuntime.jsx(legend.LegendOrdinal, { scale: legendScale, labelFormat: labelFormat, labelTransform: labelTransform, children: labels => (jsxRuntime.jsx("div", { ref: ref, role: "list", "data-testid": `legend-${orientation}`, className: clsx(legend_module.default.legend, legend_module.default[`legend--${orientation}`], legend_module.default[`legend--alignment-${alignment}`], legend_module.default[`legend--position-${position}`], className), style: {
                 flexDirection: orientationToFlexDirection[orientation],
                 ...theme.legendContainerStyles,
-            }, children: labels.map((label, i) => (jsxRuntime.jsxs(legend.LegendItem, { className: legend_module.default['legend-item'], "data-testid": "legend-item", margin: itemMargin, flexDirection: orientation === 'vertical' && alignmentHorizontal === 'right'
-                    ? 'row-reverse'
-                    : itemDirection, ...legendItemProps, children: [items[i]?.renderGlyph ? (jsxRuntime.jsx("svg", { width: items[i]?.glyphSize * 2, height: items[i]?.glyphSize * 2, "data-testid": "legend-glyph", children: jsxRuntime.jsx(group.Group, { children: items[i]?.renderGlyph({
+            }, children: labels.map((label, i) => (jsxRuntime.jsxs(legend.LegendItem, { className: legend_module.default['legend-item'], "data-testid": "legend-item", margin: itemMargin, flexDirection: orientation === 'vertical' && alignment === 'end' ? 'row-reverse' : itemDirection, ...legendItemProps, children: [items[i]?.renderGlyph ? (jsxRuntime.jsx("svg", { width: items[i]?.glyphSize * 2, height: items[i]?.glyphSize * 2, "data-testid": "legend-glyph", children: jsxRuntime.jsx(group.Group, { children: items[i]?.renderGlyph({
                                 key: `legend-glyph-${label.text}`,
                                 datum: {},
                                 index: i,

package/dist/cjs/components/legend/legend.js

@@ -2,18 +2,25 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var chartContext = require('../../providers/chart-context/chart-context.js');
+var globalChartsProvider = require('../../providers/chart-context/global-charts-provider.js');
+var singleChartContext = require('../shared/single-chart-context.js');
 var baseLegend = require('./base-legend.js');
 
 const Legend = react.forwardRef(({ chartId, items, ...props }, ref) => {
     // Get context but don't throw if it doesn't exist
-    const context = react.useContext(chartContext.ChartContext);
+    const context = react.useContext(globalChartsProvider.GlobalChartsContext);
+    const singleChartContext$1 = react.useContext(singleChartContext.SingleChartContext);
+    // When chartId is used, it is standalone mode
+    // When chartId is not provided, we use the context's chartId, meaning it is in a single chart context
+    const contextChartId = chartId ?? singleChartContext$1?.chartId;
     // Use useMemo to ensure re-rendering when context changes
     const contextItems = react.useMemo(() => {
-        return chartId && context ? context.getChartData(chartId)?.legendItems : undefined;
-    }, [chartId, context]);
-    // Use context items if available, otherwise fall back to provided items
-    const legendItems = (contextItems || items);
+        return contextChartId && context
+            ? context.getChartData(contextChartId)?.legendItems
+            : undefined;
+    }, [contextChartId, context]);
+    // Provided items take precedence over context items
+    const legendItems = (items || contextItems);
     if (!legendItems) {
         return null;
     }

package/dist/cjs/components/legend/legend.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"legend--horizontal":"legend-module_legend--horizontal__IUN13","legend--vertical":"legend-module_legend--vertical__Scfzo","legend--horizontal-align-left":"legend-module_legend--horizontal-align-left__w2O7z","legend--horizontal-align-center":"legend-module_legend--horizontal-align-center__Fmcxd","legend--horizontal-align-right":"legend-module_legend--horizontal-align-right__tKgER","legend--vertical-align-top":"legend-module_legend--vertical-align-top__l6G1I","legend--vertical-align-bottom":"legend-module_legend--vertical-align-bottom__UzHCY","legend-item":"legend-module_legend-item__feemn","legend-item-label":"legend-module_legend-item-label__ksx6I","legend-item-value":"legend-module_legend-item-value__d9x1j"};
+var styles = {"legend--horizontal":"legend-module_legend--horizontal__IUN13","legend--vertical":"legend-module_legend--vertical__Scfzo","legend--alignment-start":"legend-module_legend--alignment-start__Na2Qp","legend--alignment-center":"legend-module_legend--alignment-center__FVB2r","legend--alignment-end":"legend-module_legend--alignment-end__6Vuay","legend--position-top":"legend-module_legend--position-top__uh7-2","legend--position-bottom":"legend-module_legend--position-bottom__6Q3j-","legend-item":"legend-module_legend-item__feemn","legend-item-label":"legend-module_legend-item-label__ksx6I","legend-item-value":"legend-module_legend-item-value__d9x1j"};
 
 exports.default = styles;

package/dist/cjs/components/legend/use-chart-legend-data.js

@@ -1,6 +1,8 @@
 'use strict';
 
+require('@visx/xychart');
 var react = require('react');
+var getStyles = require('../../utils/get-styles.js');
 
 /**
  * Formats the value for a data point based on its type
@@ -22,16 +24,18 @@ function formatPointValue(point, showValues) {
 }
 /**
  * Creates a base legend item with common properties
- * @param label - The label for the legend item
- * @param value - The value for the legend item
- * @param color - The color for the legend item
+ * @param label      - The label for the legend item
+ * @param value      - The value for the legend item
+ * @param color      - The color for the legend item
+ * @param shapeStyle - The shape style for the legend item
  * @return Base legend item object
  */
-function createBaseLegendItem(label, value, color) {
+function createBaseLegendItem(label, value, color, shapeStyle) {
     return {
         label,
         value,
         color,
+        shapeStyle,
     };
 }
 /**
@@ -42,11 +46,14 @@ function createBaseLegendItem(label, value, color) {
  * @param withGlyph   - Whether to include glyph rendering
  * @param glyphSize   - Size of the glyph
  * @param renderGlyph - Component to render the glyph
+ * @param legendShape - The shape to use for the legend
  * @return Array of processed legend items
  */
-function processSeriesData(seriesData, theme, showValues, withGlyph, glyphSize, renderGlyph) {
+function processSeriesData(seriesData, theme, showValues, withGlyph, glyphSize, renderGlyph, legendShape) {
     const mapper = (series, index) => {
-        const baseItem = createBaseLegendItem(series.label, showValues ? series.data?.length?.toString() || '0' : '', theme.colors[index % theme.colors.length]);
+        const { stroke } = getStyles.getSeriesStyles(series, index, theme);
+        const { shapeStyles } = getStyles.getItemShapeStyles(series, index, theme, legendShape);
+        const baseItem = createBaseLegendItem(series.label, showValues ? series.data?.length?.toString() || '0' : '', stroke, shapeStyles);
         if (withGlyph && renderGlyph) {
             return {
                 ...baseItem,
@@ -84,12 +91,13 @@ function processPointData(pointData, theme, showValues, withGlyph, glyphSize, re
 }
 /**
  * Hook to transform chart data into legend items
- * @param data    - The chart data to transform
- * @param theme   - The chart theme for colors
- * @param options - Configuration options for legend generation
+ * @param data        - The chart data to transform
+ * @param theme       - The chart theme for colors
+ * @param options     - Configuration options for legend generation
+ * @param legendShape - The shape type for legend items (string literal or React component)
  * @return Array of legend items ready for display
  */
-function useChartLegendData(data, theme, options = {}) {
+function useChartLegendData(data, theme, options = {}, legendShape) {
     const { showValues = false, withGlyph = false, glyphSize = 8, renderGlyph } = options;
     return react.useMemo(() => {
         if (!data || !Array.isArray(data) || data.length === 0) {
@@ -97,11 +105,11 @@ function useChartLegendData(data, theme, options = {}) {
         }
         // Handle SeriesData (multiple series with data points)
         if ('data' in data[0]) {
-            return processSeriesData(data, theme, showValues, withGlyph, glyphSize, renderGlyph);
+            return processSeriesData(data, theme, showValues, withGlyph, glyphSize, renderGlyph, legendShape);
         }
         // Handle DataPointDate or DataPointPercentage (single data points)
         return processPointData(data, theme, showValues, withGlyph, glyphSize, renderGlyph);
-    }, [data, theme, showValues, withGlyph, glyphSize, renderGlyph]);
+    }, [data, theme, showValues, withGlyph, glyphSize, renderGlyph, legendShape]);
 }
 
 exports.useChartLegendData = useChartLegendData;

package/dist/cjs/components/line-chart/line-chart-annotations-overlay.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var xychart = require('@visx/xychart');
 var react = require('react');
-var lineChartContext = require('./line-chart-context.js');
+var singleChartContext = require('../shared/single-chart-context.js');
 var lineChart_module = require('./line-chart.module.scss.js');
 
 const LineChartAnnotationsOverlay = ({ children }) => {
-    const { chartRef, chartWidth, chartHeight } = lineChartContext.useLineChartContext();
+    const { chartRef, chartWidth, chartHeight } = singleChartContext.useSingleChartContext();
     const [scales, setScales] = react.useState(null);
     const [scalesStable, setScalesStable] = react.useState(false);
     // Create a signature for scale data to enable easy comparison

package/dist/cjs/components/line-chart/line-chart.js

@@ -10,13 +10,16 @@ var gradient = require('@visx/gradient');
 var xychart = require('@visx/xychart');
 var i18n = require('@wordpress/i18n');
 var clsx = require('clsx');
-var chartContext = require('../../providers/chart-context/chart-context.js');
+var globalChartsProvider = require('../../providers/chart-context/global-charts-provider.js');
 var utils = require('../../providers/chart-context/utils.js');
 var themeProvider = require('../../providers/theme/theme-provider.js');
+var createComposition = require('../../utils/create-composition.js');
+var getStyles = require('../../utils/get-styles.js');
 var legend = require('../legend/legend.js');
 require('../legend/base-legend.js');
 var useChartLegendData = require('../legend/use-chart-legend-data.js');
 var defaultGlyph = require('../shared/default-glyph.js');
+var singleChartContext = require('../shared/single-chart-context.js');
 var useChartDataTransform = require('../shared/use-chart-data-transform.js');
 var useChartMargin = require('../shared/use-chart-margin.js');
 var useElementHeight = require('../shared/use-element-height.js');
@@ -24,7 +27,6 @@ var withResponsive = require('../shared/with-responsive.js');
 var accessibleTooltip = require('../tooltip/accessible-tooltip.js');
 var lineChartAnnotation = require('./line-chart-annotation.js');
 var lineChartAnnotationsOverlay = require('./line-chart-annotations-overlay.js');
-var lineChartContext = require('./line-chart-context.js');
 var lineChart_module = require('./line-chart.module.scss.js');
 
 const X_TICK_WIDTH = 100;
@@ -134,7 +136,7 @@ const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
     }), [context, width, height, margin]);
     return null; // This component only provides the ref interface
 };
-const LineChartInternal = react.forwardRef(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legendOrientation = 'horizontal', legendAlignmentHorizontal = 'center', legendAlignmentVertical = 'bottom', renderGlyph = defaultRenderGlyph, glyphStyle = {}, legendShape = 'line', withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, withStartGlyphs = false, options = {}, onPointerDown = undefined, onPointerUp = undefined, onPointerMove = undefined, onPointerOut = undefined, children, }, ref) => {
+const LineChartInternal = react.forwardRef(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legendOrientation = 'horizontal', legendAlignment = 'center', legendPosition = 'bottom', renderGlyph = defaultRenderGlyph, glyphStyle = {}, legendShape = 'line', withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, withStartGlyphs = false, options = {}, onPointerDown = undefined, onPointerUp = undefined, onPointerMove = undefined, onPointerOut = undefined, children, }, ref) => {
     const providerTheme = themeProvider.useChartTheme();
     const theme = themeProvider.useXYChartTheme(data);
     const chartId = utils.useChartId(providedChartId);
@@ -204,7 +206,7 @@ const LineChartInternal = react.forwardRef(({ data, chartId: providedChartId, wi
         renderGlyph,
     }), [withLegendGlyph, glyphStyle?.radius, renderGlyph]);
     // Create legend items using the reusable hook
-    const legendItems = useChartLegendData.useChartLegendData(dataSorted, providerTheme, legendOptions);
+    const legendItems = useChartLegendData.useChartLegendData(dataSorted, providerTheme, legendOptions, legendShape);
     // Memoize metadata to prevent unnecessary re-registration
     const chartMetadata = react.useMemo(() => ({
         withGradientFill,
@@ -223,7 +225,7 @@ const LineChartInternal = react.forwardRef(({ data, chartId: providedChartId, wi
     if (error) {
         return jsxRuntime.jsx("div", { className: clsx('line-chart', lineChart_module.default['line-chart']), children: error });
     }
-    return (jsxRuntime.jsx(lineChartContext.LineChartContext.Provider, { value: {
+    return (jsxRuntime.jsx(singleChartContext.SingleChartContext.Provider, { value: {
             chartId,
             chartRef: internalChartRef,
             chartWidth: width,
@@ -232,42 +234,46 @@ const LineChartInternal = react.forwardRef(({ data, chartId: providedChartId, wi
                 width,
                 height,
                 display: 'flex',
-                flexDirection: showLegend && legendAlignmentVertical === 'top' ? 'column-reverse' : 'column',
+                flexDirection: showLegend && legendPosition === 'top' ? 'column-reverse' : 'column',
                 position: 'relative',
             }, children: [jsxRuntime.jsx("div", { role: "grid", "aria-label": i18n.__('Line chart', 'jetpack-charts'), tabIndex: 0, onKeyDown: onChartKeyDown, onFocus: onChartFocus, onBlur: onChartBlur, ref: chartRef, children: jsxRuntime.jsxs(xychart.XYChart, { theme: theme, width: width, height: height - (showLegend ? legendHeight : 0), margin: {
                             ...defaultMargin,
                             ...margin,
-                            ...(showLegend && legendAlignmentVertical === 'top'
+                            ...(showLegend && legendPosition === 'top'
                                 ? { top: (defaultMargin.top || 0) + legendHeight }
                                 : {}),
                         }, 
                         // xScale and yScale could be set in Axis as well, but they are `scale` props there.
                         xScale: chartOptions.xScale, yScale: chartOptions.yScale, onPointerDown: onPointerDown, onPointerUp: onPointerUp, onPointerMove: onPointerMove, onPointerOut: onPointerOut, pointerEventsDataKey: "nearest", children: [jsxRuntime.jsx(xychart.Grid, { columns: false, numTicks: 4 }), jsxRuntime.jsx(xychart.Axis, { ...chartOptions.axis.x }), jsxRuntime.jsx(xychart.Axis, { ...chartOptions.axis.y }), dataSorted.map((seriesData, index) => {
-                                const stroke = seriesData.options?.stroke ?? theme.colors[index % theme.colors.length];
-                                const lineProps = seriesData.options?.seriesLineStyle ??
-                                    providerTheme?.seriesLineStyles?.[index % providerTheme.seriesLineStyles.length] ??
-                                    {};
+                                const { stroke, lineStyles } = getStyles.getSeriesStyles(seriesData, index, providerTheme);
+                                const lineProps = {
+                                    stroke,
+                                    ...lineStyles,
+                                };
                                 return (jsxRuntime.jsxs("g", { children: [withStartGlyphs && (jsxRuntime.jsx(StartGlyph, { index: index, data: seriesData, color: stroke, renderGlyph: providerTheme.glyphs?.[index] ?? renderGlyph, accessors: accessors, glyphStyle: glyphStyle })), withGradientFill && (jsxRuntime.jsx(gradient.LinearGradient, { id: `area-gradient-${chartId}-${index + 1}`, from: stroke, fromOpacity: 0.4, toOpacity: 0.1, to: theme.backgroundColor, ...seriesData.options?.gradient, "data-testid": "line-gradient" })), jsxRuntime.jsx(xychart.AreaSeries, { dataKey: seriesData?.label, data: seriesData.data, ...accessors, fill: withGradientFill
                                                 ? `url(#area-gradient-${chartId}-${index + 1})`
                                                 : 'transparent', renderLine: true, curve: getCurveType(curveType, smoothing), lineProps: lineProps }, seriesData?.label)] }, seriesData?.label || index));
-                            }), withTooltips && (jsxRuntime.jsx(accessibleTooltip.AccessibleTooltip, { detectBounds: true, snapTooltipToDatumX: true, snapTooltipToDatumY: true, showSeriesGlyphs: true, renderTooltip: renderTooltip, renderGlyph: tooltipRenderGlyph, glyphStyle: glyphStyle, showVerticalCrosshair: withTooltipCrosshairs?.showVertical, showHorizontalCrosshair: withTooltipCrosshairs?.showHorizontal, selectedIndex: selectedIndex, tooltipRef: tooltipRef, keyboardFocusedClassName: lineChart_module.default['line-chart__tooltip--keyboard-focused'], series: dataSorted })), jsxRuntime.jsx(LineChartScalesRef, { chartRef: internalChartRef, width: width, height: height, margin: margin })] }) }), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, alignmentHorizontal: legendAlignmentHorizontal, alignmentVertical: legendAlignmentVertical, className: lineChart_module.default['line-chart-legend'], shape: legendShape, chartId: chartId, ref: legendRef })), children] }) }));
+                            }), withTooltips && (jsxRuntime.jsx(accessibleTooltip.AccessibleTooltip, { detectBounds: true, snapTooltipToDatumX: true, snapTooltipToDatumY: true, showSeriesGlyphs: true, renderTooltip: renderTooltip, renderGlyph: tooltipRenderGlyph, glyphStyle: glyphStyle, showVerticalCrosshair: withTooltipCrosshairs?.showVertical, showHorizontalCrosshair: withTooltipCrosshairs?.showHorizontal, selectedIndex: selectedIndex, tooltipRef: tooltipRef, keyboardFocusedClassName: lineChart_module.default['line-chart__tooltip--keyboard-focused'], series: dataSorted })), jsxRuntime.jsx(LineChartScalesRef, { chartRef: internalChartRef, width: width, height: height, margin: margin })] }) }), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, alignment: legendAlignment, position: legendPosition, className: lineChart_module.default['line-chart-legend'], shape: legendShape, chartId: chartId, ref: legendRef })), children] }) }));
 });
-const LineChart = react.forwardRef((props, ref) => {
-    const existingContext = react.useContext(chartContext.ChartContext);
-    // If we're already in a ChartProvider context, don't create a new one
+const LineChartWithProvider = react.forwardRef((props, ref) => {
+    const existingContext = react.useContext(globalChartsProvider.GlobalChartsContext);
+    // If we're already in a GlobalChartsProvider context, render the core component directly
     if (existingContext) {
         return jsxRuntime.jsx(LineChartInternal, { ...props, ref: ref });
     }
-    // Otherwise, create our own ChartProvider
-    return (jsxRuntime.jsx(chartContext.ChartProvider, { children: jsxRuntime.jsx(LineChartInternal, { ...props, ref: ref }) }));
+    // Otherwise, wrap with our own GlobalChartsProvider
+    return (jsxRuntime.jsx(globalChartsProvider.GlobalChartsProvider, { children: jsxRuntime.jsx(LineChartInternal, { ...props, ref: ref }) }));
 });
-LineChart.displayName = 'LineChart';
-LineChart.AnnotationsOverlay = lineChartAnnotationsOverlay.default;
-LineChart.Annotation = lineChartAnnotation.default;
-const ResponsiveLineChart = Object.assign(withResponsive.withResponsive(LineChart), {
+LineChartWithProvider.displayName = 'LineChart';
+createComposition.attachSubComponents(LineChartWithProvider, {
+    Legend: legend.Legend,
+    AnnotationsOverlay: lineChartAnnotationsOverlay.default,
+    Annotation: lineChartAnnotation.default,
+});
+const LineChartResponsive = createComposition.attachSubComponents(withResponsive.withResponsive(LineChartWithProvider), {
+    Legend: legend.Legend,
     AnnotationsOverlay: lineChartAnnotationsOverlay.default,
     Annotation: lineChartAnnotation.default,
 });
 
-exports.LineChartUnresponsive = LineChart;
-exports.default = ResponsiveLineChart;
+exports.default = LineChartResponsive;

package/dist/cjs/components/pie-chart/pie-chart.js

@@ -8,7 +8,7 @@ var shape = require('@visx/shape');
 var clsx = require('clsx');
 var react = require('react');
 var useChartMouseHandler = require('../../hooks/use-chart-mouse-handler.js');
-var chartContext = require('../../providers/chart-context/chart-context.js');
+var globalChartsProvider = require('../../providers/chart-context/global-charts-provider.js');
 var utils = require('../../providers/chart-context/utils.js');
 var themeProvider = require('../../providers/theme/theme-provider.js');
 var themes = require('../../providers/theme/themes.js');
@@ -48,7 +48,7 @@ const validateData = (data) => {
  * @param {PieChartProps} props - Component props
  * @return {JSX.Element} The rendered chart component
  */
-const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false, className, showLegend = false, legendOrientation = 'horizontal', legendAlignmentHorizontal = 'center', legendAlignmentVertical = 'bottom', legendShape = 'circle', size, thickness = 1, padding = 20, gapScale = 0, cornerScale = 0, children = null, }) => {
+const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false, className, showLegend = false, legendOrientation = 'horizontal', legendPosition = 'bottom', legendAlignment = 'center', legendShape = 'circle', size, thickness = 1, padding = 20, gapScale = 0, cornerScale = 0, children = null, }) => {
     const providerTheme = themeProvider.useChartTheme();
     const chartId = utils.useChartId(providedChartId);
     const [legendRef, legendHeight] = useElementHeight.useElementHeight();
@@ -73,7 +73,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
     }
     const width = size;
     const height = size;
-    const adjustedHeight = showLegend && legendAlignmentVertical === 'top' ? height - legendHeight : height;
+    const adjustedHeight = showLegend && legendPosition === 'top' ? height - legendHeight : height;
     // Calculate radius based on width/height
     const radius = Math.min(width, adjustedHeight) / 2;
     // Center the chart in the available space
@@ -97,7 +97,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
     };
     return (jsxRuntime.jsxs("div", { className: clsx('pie-chart', pieChart_module.default['pie-chart'], className), style: {
             display: 'flex',
-            flexDirection: showLegend && legendAlignmentVertical === 'top' ? 'column-reverse' : 'column',
+            flexDirection: showLegend && legendPosition === 'top' ? 'column-reverse' : 'column',
         }, children: [jsxRuntime.jsx("svg", { viewBox: `0 0 ${size} ${adjustedHeight}`, preserveAspectRatio: "xMidYMid meet", width: size, height: adjustedHeight, children: jsxRuntime.jsxs(group.Group, { top: centerY, left: centerX, children: [jsxRuntime.jsx(shape.Pie, { data: dataWithIndex, pieValue: accessors.value, outerRadius: outerRadius, innerRadius: innerRadius, padAngle: padAngle, cornerRadius: cornerRadius, children: pie => {
                                 return pie.arcs.map((arc, index) => {
                                     const [centroidX, centroidY] = pie.path.centroid(arc);
@@ -113,18 +113,18 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
                                     }
                                     return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { ...pathProps }), hasSpaceForLabel && (jsxRuntime.jsx("text", { x: centroidX, y: centroidY, dy: ".33em", fill: providerTheme.labelBackgroundColor || themes.defaultTheme.labelBackgroundColor, fontSize: 12, textAnchor: "middle", pointerEvents: "none", children: arc.data.label }))] }, `arc-${index}`));
                                 });
-                            } }), children] }) }), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, alignmentHorizontal: legendAlignmentHorizontal, alignmentVertical: legendAlignmentVertical, className: pieChart_module.default['pie-chart-legend'], shape: legendShape, ref: legendRef, chartId: chartId })), withTooltips && tooltipOpen && tooltipData && (jsxRuntime.jsx(baseTooltip.BaseTooltip, { data: tooltipData, top: tooltipTop || 0, left: tooltipLeft || 0, style: {
+                            } }), children] }) }), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, position: legendPosition, alignment: legendAlignment, className: pieChart_module.default['pie-chart-legend'], shape: legendShape, ref: legendRef, chartId: chartId })), withTooltips && tooltipOpen && tooltipData && (jsxRuntime.jsx(baseTooltip.BaseTooltip, { data: tooltipData, top: tooltipTop || 0, left: tooltipLeft || 0, style: {
                     transform: 'translate(-50%, -100%)',
                 } }))] }));
 };
 const PieChart = (props) => {
-    const existingContext = react.useContext(chartContext.ChartContext);
-    // If we're already in a ChartProvider context, don't create a new one
+    const existingContext = react.useContext(globalChartsProvider.GlobalChartsContext);
+    // If we're already in a GlobalChartsProvider context, don't create a new one
     if (existingContext) {
         return jsxRuntime.jsx(PieChartInternal, { ...props });
     }
-    // Otherwise, create our own ChartProvider
-    return (jsxRuntime.jsx(chartContext.ChartProvider, { children: jsxRuntime.jsx(PieChartInternal, { ...props }) }));
+    // Otherwise, create our own GlobalChartsProvider
+    return (jsxRuntime.jsx(globalChartsProvider.GlobalChartsProvider, { children: jsxRuntime.jsx(PieChartInternal, { ...props }) }));
 };
 PieChart.displayName = 'PieChart';
 var pieChart = withResponsive.withResponsive(PieChart);

package/dist/cjs/components/pie-semi-circle-chart/pie-semi-circle-chart.js

@@ -10,7 +10,7 @@ var text = require('@visx/text');
 var tooltip = require('@visx/tooltip');
 var clsx = require('clsx');
 var react = require('react');
-var chartContext = require('../../providers/chart-context/chart-context.js');
+var globalChartsProvider = require('../../providers/chart-context/global-charts-provider.js');
 var utils = require('../../providers/chart-context/utils.js');
 var themeProvider = require('../../providers/theme/theme-provider.js');
 var legend = require('../legend/legend.js');
@@ -43,7 +43,7 @@ const validateData = (data) => {
     }
     return { isValid: true, message: '' };
 };
-const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width = 400, thickness = 0.4, clockwise = true, withTooltips = false, showLegend = false, legendOrientation = 'horizontal', legendAlignmentHorizontal = 'center', legendAlignmentVertical = 'bottom', legendShape = 'circle', label, note, className, }) => {
+const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width = 400, thickness = 0.4, clockwise = true, withTooltips = false, showLegend = false, legendOrientation = 'horizontal', legendPosition = 'bottom', legendAlignment = 'center', legendShape = 'circle', label, note, className, }) => {
     const providerTheme = themeProvider.useChartTheme();
     const chartId = utils.useChartId(providedChartId);
     const [legendRef, legendHeight] = useElementHeight.useElementHeight();
@@ -91,7 +91,7 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width = 40
     // TODO: we might want to accept height as a prop in the future, because the height of container might not always be enough.
     const height = width / 2;
     // The chart only takes the height minus the legend height.
-    const chartHeight = height - (showLegend && legendAlignmentVertical === 'top' ? legendHeight : 0);
+    const chartHeight = height - (showLegend && legendPosition === 'top' ? legendHeight : 0);
     const radius = Math.min(width / 2, chartHeight);
     const innerRadius = radius * (1 - thickness);
     // Map data with index for color assignment
@@ -104,16 +104,16 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width = 40
     const endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;
     return (jsxRuntime.jsxs("div", { className: clsx('pie-semi-circle-chart', pieSemiCircleChart_module.default['pie-semi-circle-chart'], className), "data-testid": "pie-chart-container", style: {
             display: 'flex',
-            flexDirection: showLegend && legendAlignmentVertical === 'top' ? 'column-reverse' : 'column',
+            flexDirection: showLegend && legendPosition === 'top' ? 'column-reverse' : 'column',
         }, children: [jsxRuntime.jsx("svg", { width: width, height: radius, viewBox: `0 0 ${width} ${chartHeight}`, "data-testid": "pie-chart-svg", children: jsxRuntime.jsxs(group.Group, { top: chartHeight, left: width / 2, children: [jsxRuntime.jsx(shape.Pie, { data: dataWithIndex, pieValue: accessors.value, outerRadius: radius, innerRadius: innerRadius, cornerRadius: 3, padAngle: PAD_ANGLE, startAngle: startAngle, endAngle: endAngle, pieSort: accessors.sort, children: pie => {
                                 return pie.arcs.map(arc => (jsxRuntime.jsx("g", { onMouseMove: handleArcMouseMove(arc), onMouseLeave: handleMouseLeave, children: jsxRuntime.jsx("path", { d: pie.path(arc) || '', fill: accessors.fill(arc.data), "data-testid": "pie-segment" }) }, arc.data.label)));
                             } }), jsxRuntime.jsxs(group.Group, { children: [jsxRuntime.jsx(text.Text, { textAnchor: "middle", verticalAnchor: "start", y: -40, className: pieSemiCircleChart_module.default.label, children: label }), jsxRuntime.jsx(text.Text, { textAnchor: "middle", verticalAnchor: "start", y: -20, className: pieSemiCircleChart_module.default.note, children: note })] })] }) }), withTooltips && tooltipOpen && tooltipData && (jsxRuntime.jsx(baseTooltip.BaseTooltip, { data: {
                     label: tooltipData.label,
                     value: tooltipData.value,
                     valueDisplay: tooltipData.valueDisplay,
-                }, top: tooltipTop || 0, left: tooltipLeft || 0 })), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, alignmentHorizontal: legendAlignmentHorizontal, alignmentVertical: legendAlignmentVertical, shape: legendShape, ref: legendRef, chartId: chartId }))] }));
+                }, top: tooltipTop || 0, left: tooltipLeft || 0 })), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, position: legendPosition, alignment: legendAlignment, shape: legendShape, ref: legendRef, chartId: chartId }))] }));
 };
-const PieSemiCircleChart = props => (jsxRuntime.jsx(chartContext.ChartProvider, { children: jsxRuntime.jsx(PieSemiCircleChartInternal, { ...props }) }));
+const PieSemiCircleChart = props => (jsxRuntime.jsx(globalChartsProvider.GlobalChartsProvider, { children: jsxRuntime.jsx(PieSemiCircleChartInternal, { ...props }) }));
 PieSemiCircleChart.displayName = 'PieSemiCircleChart';
 var pieSemiCircleChart = withResponsive.withResponsive(PieSemiCircleChart);
 

package/dist/cjs/components/shared/single-chart-context.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var react = require('react');
+
+const ChartInstanceContext = react.createContext(null);
+const useChartInstanceContext = () => {
+    const context = react.useContext(ChartInstanceContext);
+    if (!context) {
+        throw new Error('useChartInstanceContext must be used within a Chart component');
+    }
+    return context;
+};
+// Backward compatibility exports
+const SingleChartContext = ChartInstanceContext;
+const useSingleChartContext = useChartInstanceContext;
+
+exports.ChartInstanceContext = ChartInstanceContext;
+exports.SingleChartContext = SingleChartContext;
+exports.useChartInstanceContext = useChartInstanceContext;
+exports.useSingleChartContext = useSingleChartContext;

package/dist/cjs/providers/chart-context/{chart-context.js → global-charts-provider.js}

@@ -3,8 +3,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
-const ChartContext = react.createContext(null);
-const ChartProvider = ({ children }) => {
+const GlobalChartsContext = react.createContext(null);
+const GlobalChartsProvider = ({ children }) => {
     const [charts, setCharts] = react.useState(() => new Map());
     const registerChart = react.useCallback((id, data) => {
         setCharts(prev => new Map(prev).set(id, data));
@@ -25,16 +25,16 @@ const ChartProvider = ({ children }) => {
         unregisterChart,
         getChartData,
     }), [charts, registerChart, unregisterChart, getChartData]);
-    return jsxRuntime.jsx(ChartContext.Provider, { value: value, children: children });
+    return jsxRuntime.jsx(GlobalChartsContext.Provider, { value: value, children: children });
 };
-const useChartContext = () => {
-    const context = react.useContext(ChartContext);
+const useGlobalChartsContext = () => {
+    const context = react.useContext(GlobalChartsContext);
     if (!context) {
-        throw new Error('useChartContext must be used within a ChartProvider');
+        throw new Error('useGlobalChartsContext must be used within a GlobalChartsProvider');
     }
     return context;
 };
 
-exports.ChartContext = ChartContext;
-exports.ChartProvider = ChartProvider;
-exports.useChartContext = useChartContext;
+exports.GlobalChartsContext = GlobalChartsContext;
+exports.GlobalChartsProvider = GlobalChartsProvider;
+exports.useGlobalChartsContext = useGlobalChartsContext;

package/dist/cjs/providers/chart-context/index.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var chartContext = require('./chart-context.js');
+var globalChartsProvider = require('./global-charts-provider.js');
 var utils = require('./utils.js');
 
 
 
-exports.ChartContext = chartContext.ChartContext;
-exports.ChartProvider = chartContext.ChartProvider;
-exports.useChartContext = chartContext.useChartContext;
+exports.GlobalChartsContext = globalChartsProvider.GlobalChartsContext;
+exports.GlobalChartsProvider = globalChartsProvider.GlobalChartsProvider;
+exports.useGlobalChartsContext = globalChartsProvider.useGlobalChartsContext;
 exports.useChartId = utils.useChartId;
 exports.useChartRegistration = utils.useChartRegistration;