@classic-homes/charts-react 0.5.0 → 0.7.0

package/dist/index.cjs

@@ -880,6 +880,7 @@ var LineChart = React6.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     onHover,
     class: className,
@@ -914,16 +915,21 @@ var LineChart = React6.forwardRef(
       const series = data.series.map((source, index) => ({
         name: source.name,
         type: "line",
-        data: (0, import_charts_core6.withForecastPoints)(
-          (0, import_charts_core6.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
-            position: "top"
-          }),
-          source,
-          showDataPoints ? 6 : 0
+        data: (0, import_charts_core6.withSelectedPoints)(
+          (0, import_charts_core6.withForecastPoints)(
+            (0, import_charts_core6.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
+              position: "top"
+            }),
+            source,
+            showDataPoints ? 6 : 0
+          ),
+          data.categories,
+          selected,
+          { pointSize: showDataPoints ? 6 : 0, ringColor: chartColors.surface }
         ),
         smooth,
-        // Forecast points show even when the others are hidden (size 0)
-        showSymbol: showSymbol || (0, import_charts_core6.forecastStart)(source) !== void 0,
+        // Forecast and selected points show even when the others are hidden (size 0)
+        showSymbol: showSymbol || (0, import_charts_core6.forecastStart)(source) !== void 0 || (0, import_charts_core6.selectionShowsSymbols)(selected),
         symbolSize: showDataPoints ? 6 : 0,
         connectNulls,
         stack: stacked ? "Total" : void 0,
@@ -997,12 +1003,17 @@ var LineChart = React6.forwardRef(
             formatters.axis(yAxisConfig)
           ),
           series: (0, import_charts_core6.withForecastLines)(
-            (0, import_charts_core6.withReferenceMarks)(series, referenceLines, referenceBands, {
-              valueAxis: "y",
-              format: formatters.format,
-              color: chartColors.reference,
-              bandColor: chartColors.referenceBand
-            }),
+            (0, import_charts_core6.withReferenceMarks)(
+              (0, import_charts_core6.withGhostSeries)(series, data.series),
+              referenceLines,
+              referenceBands,
+              {
+                valueAxis: "y",
+                format: formatters.format,
+                color: chartColors.reference,
+                bandColor: chartColors.referenceBand
+              }
+            ),
             data.series,
             {
               colors: data.series.map(
@@ -1015,6 +1026,7 @@ var LineChart = React6.forwardRef(
       );
     }, [
       data,
+      selected,
       isEmpty,
       showTooltip,
       showLegend,
@@ -1055,7 +1067,10 @@ var LineChart = React6.forwardRef(
       onCreated: onReady
     });
     const format = (0, import_charts_core6.resolveValueFormatter)(valueFormat, locale);
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core6.generateLineChartDescription)(title, data, format) : void 0);
+    const accessibilityDescription = (0, import_charts_core6.withSelectionDescription)(
+      description || (!isEmpty ? (0, import_charts_core6.generateLineChartDescription)(title, data, format) : void 0),
+      selected
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ChartContainer,
       {
@@ -1141,6 +1156,7 @@ var BarChart = React7.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     onHover,
     class: className,
@@ -1190,39 +1206,48 @@ var BarChart = React7.forwardRef(
       const labelPosition = isHorizontal ? "right" : "top";
       const zoomAxis = isHorizontal ? "y" : "x";
       const legendBottom = builtInLegend && (legendConfig?.position ?? "bottom") === "bottom";
-      const stackIds = data.series.map(() => stacked ? "Total" : void 0);
-      const series = data.series.map((source, index) => ({
-        name: source.name,
-        type: "bar",
-        data: (0, import_charts_core7.withForecastBars)(
-          (0, import_charts_core7.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
-            position: labelPosition
+      const stackIds = data.series.map((s) => (0, import_charts_core7.ghostStackId)(stacked ? "Total" : void 0, s));
+      const series = (0, import_charts_core7.withGhostSeries)(
+        data.series.map((source, index) => ({
+          name: source.name,
+          type: "bar",
+          data: (0, import_charts_core7.withSelectedBars)(
+            (0, import_charts_core7.withForecastBars)(
+              (0, import_charts_core7.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
+                position: labelPosition
+              }),
+              source,
+              source.color || chartColors.series[index % chartColors.series.length]
+            ),
+            data.categories,
+            selected,
+            (0, import_charts_core7.isGhostSeries)(source) ? import_charts_core7.GHOST_BAR_OPACITY : 1
+          ),
+          stack: stackIds[index],
+          itemStyle: {
+            ...source.color && { color: source.color },
+            borderRadius: (0, import_charts_core7.barCornerRadius)(isHorizontal, stackIds, index)
+          },
+          label: (0, import_charts_core7.buildDataLabel)({ show: true, position: labelPosition }, void 0, {
+            show: showValues,
+            formatter: formatters.label,
+            getLabel
           }),
-          source,
-          source.color || chartColors.series[index % chartColors.series.length]
-        ),
-        stack: stackIds[index],
-        itemStyle: {
-          ...source.color && { color: source.color },
-          borderRadius: (0, import_charts_core7.barCornerRadius)(isHorizontal, stackIds, index)
-        },
-        label: (0, import_charts_core7.buildDataLabel)({ show: true, position: labelPosition }, void 0, {
-          show: showValues,
-          formatter: formatters.label,
-          getLabel
-        }),
-        emphasis: {
-          focus: "series"
-        }
-      }));
+          emphasis: {
+            focus: "series"
+          }
+        })),
+        data.series
+      );
       const format2 = (0, import_charts_core7.resolveValueFormatter)(valueFormat, locale);
-      const stackedSeries = data.series.map((s) => ({ data: s.data }));
+      const isSolid = (index) => data.series[index].variant !== "ghost";
+      const stackedSeries = data.series.filter((_, index) => isSolid(index)).map((s) => ({ data: s.data }));
       const totalSeries = showTotal ? (0, import_charts_core7.buildStackTotalSeries)(data.categories, stackedSeries, {
         stacked,
         position: labelPosition,
         format: format2
       }) : [];
-      const endLabels = !isHorizontal ? [] : totalSeries.length ? [...(0, import_charts_core7.stackTotals)(stackedSeries, stacked).values()].flat().map((t) => (0, import_charts_core7.formatValue)(t, format2)) : showValues ? plotted.flatMap((s) => s.data.map((value) => (0, import_charts_core7.formatValue)(value, formatters.format))) : [];
+      const endLabels = !isHorizontal ? [] : totalSeries.length ? [...(0, import_charts_core7.stackTotals)(stackedSeries, stacked).values()].flat().map((t) => (0, import_charts_core7.formatValue)(t, format2)) : showValues ? plotted.filter((_, index) => isSolid(index)).flatMap((s) => s.data.map((value) => (0, import_charts_core7.formatValue)(value, formatters.format))) : [];
       return (0, import_charts_core7.mergeChartOption)(
         {
           grid: {
@@ -1280,6 +1305,7 @@ var BarChart = React7.forwardRef(
       );
     }, [
       data,
+      selected,
       isEmpty,
       showTooltip,
       showLegend,
@@ -1318,7 +1344,10 @@ var BarChart = React7.forwardRef(
       onCreated: onReady
     });
     const format = (0, import_charts_core7.resolveValueFormatter)(valueFormat, locale);
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core7.generateBarChartDescription)(title, data, format) : void 0);
+    const accessibilityDescription = (0, import_charts_core7.withSelectionDescription)(
+      description || (!isEmpty ? (0, import_charts_core7.generateBarChartDescription)(title, data, format) : void 0),
+      selected
+    );
     const resolvedHeight = isHorizontal ? (0, import_charts_core7.resolveChartHeight)(height, data?.categories?.length ?? 0, {
       rowHeight,
       minHeight,
@@ -1395,6 +1424,7 @@ var PieChart = React8.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     class: className,
     ...props
@@ -1444,12 +1474,15 @@ var PieChart = React8.forwardRef(
               type: "pie",
               radius: innerRadius ? [innerRadius, "70%"] : "70%",
               center: (0, import_charts_core8.legendCenter)(legendConfig, showLegend && !customLegend, ["50%", "45%"]),
-              data: data.map((item) => ({
-                name: item.name,
-                value: item.value,
-                itemStyle: item.color ? { color: item.color } : void 0,
-                label: (0, import_charts_core8.pointLabel)(item.label, labelFormatter, { position: labelPosition })
-              })),
+              data: (0, import_charts_core8.withSelectedSlices)(
+                data.map((item) => ({
+                  name: item.name,
+                  value: item.value,
+                  itemStyle: item.color ? { color: item.color } : void 0,
+                  label: (0, import_charts_core8.pointLabel)(item.label, labelFormatter, { position: labelPosition })
+                })),
+                selected
+              ),
               label: (0, import_charts_core8.buildDataLabel)(
                 {
                   show: true,
@@ -1473,6 +1506,7 @@ var PieChart = React8.forwardRef(
       );
     }, [
       data,
+      selected,
       isEmpty,
       showTooltip,
       showLegend,
@@ -1498,7 +1532,10 @@ var PieChart = React8.forwardRef(
       onReady: legend.attach,
       onCreated: onReady
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core8.generatePieChartDescription)(title, data, false) : void 0);
+    const accessibilityDescription = (0, import_charts_core8.withSelectionDescription)(
+      description || (!isEmpty ? (0, import_charts_core8.generatePieChartDescription)(title, data, false) : void 0),
+      selected
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ChartContainer,
       {
@@ -1584,6 +1621,8 @@ var AreaChart = React9.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    showDataPoints = false,
+    selected,
     onClick,
     onHover,
     class: className,
@@ -1613,18 +1652,25 @@ var AreaChart = React9.forwardRef(
       });
       const plotted = isPercent ? (0, import_charts_core9.toPercentStack)(data.series) : data.series;
       const getLabel = (0, import_charts_core9.seriesLabelLookup)(data.series);
-      const showSymbol = showLabels || (0, import_charts_core9.hasPointLabels)(data.series);
+      const showSymbol = showDataPoints || showLabels || (0, import_charts_core9.hasPointLabels)(data.series);
+      const pointSize = showDataPoints ? 6 : showSymbol ? 4 : 0;
       const legendBottom = builtInLegend && (legendConfig?.position ?? "bottom") === "bottom";
       const series = data.series.map((source, index) => {
         const base = source.color || chartColors.series[index % chartColors.series.length];
         return {
           name: source.name,
           type: "line",
-          data: (0, import_charts_core9.withForecastPoints)(
-            (0, import_charts_core9.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
-              position: "top"
-            }),
-            source
+          data: (0, import_charts_core9.withSelectedPoints)(
+            (0, import_charts_core9.withForecastPoints)(
+              (0, import_charts_core9.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
+                position: "top"
+              }),
+              source,
+              pointSize
+            ),
+            data.categories,
+            selected,
+            { pointSize, ringColor: chartColors.surface }
           ),
           smooth,
           connectNulls,
@@ -1645,8 +1691,9 @@ var AreaChart = React9.forwardRef(
           emphasis: {
             focus: "series"
           },
-          // Forecast points show even when the others are hidden (size 0)
-          ...(0, import_charts_core9.forecastStart)(source) === void 0 ? { showSymbol } : { showSymbol: true, symbolSize: showSymbol ? 4 : 0 }
+          // Forecast and selected points show even when the others are hidden (size 0)
+          showSymbol: showSymbol || (0, import_charts_core9.forecastStart)(source) !== void 0 || (0, import_charts_core9.selectionShowsSymbols)(selected),
+          symbolSize: pointSize
         };
       });
       return (0, import_charts_core9.mergeChartOption)(
@@ -1705,12 +1752,17 @@ var AreaChart = React9.forwardRef(
             formatters.axis(yAxisConfig)
           ),
           series: (0, import_charts_core9.withForecastLines)(
-            (0, import_charts_core9.withReferenceMarks)(series, referenceLines, referenceBands, {
-              valueAxis: "y",
-              format: formatters.format,
-              color: chartColors.reference,
-              bandColor: chartColors.referenceBand
-            }),
+            (0, import_charts_core9.withReferenceMarks)(
+              (0, import_charts_core9.withGhostSeries)(series, data.series),
+              referenceLines,
+              referenceBands,
+              {
+                valueAxis: "y",
+                format: formatters.format,
+                color: chartColors.reference,
+                bandColor: chartColors.referenceBand
+              }
+            ),
             data.series,
             {
               colors: data.series.map(
@@ -1723,6 +1775,8 @@ var AreaChart = React9.forwardRef(
       );
     }, [
       data,
+      selected,
+      showDataPoints,
       isEmpty,
       showTooltip,
       showLegend,
@@ -1762,7 +1816,10 @@ var AreaChart = React9.forwardRef(
       onCreated: onReady
     });
     const format = (0, import_charts_core9.resolveValueFormatter)(valueFormat, locale);
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core9.generateAreaChartDescription)(title, data, format) : void 0);
+    const accessibilityDescription = (0, import_charts_core9.withSelectionDescription)(
+      description || (!isEmpty ? (0, import_charts_core9.generateAreaChartDescription)(title, data, format) : void 0),
+      selected
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       ChartContainer,
       {
@@ -2103,6 +2160,7 @@ var DonutChart = React11.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     class: className,
     ...props
@@ -2199,12 +2257,15 @@ var DonutChart = React11.forwardRef(
               radius: [innerRadius, "70%"],
               center: pieCenter,
               avoidLabelOverlap: true,
-              data: data.map((item) => ({
-                name: item.name,
-                value: item.value,
-                itemStyle: item.color ? { color: item.color } : void 0,
-                label: (0, import_charts_core11.pointLabel)(item.label, labelFormatter, { position: labelPosition })
-              })),
+              data: (0, import_charts_core11.withSelectedSlices)(
+                data.map((item) => ({
+                  name: item.name,
+                  value: item.value,
+                  itemStyle: item.color ? { color: item.color } : void 0,
+                  label: (0, import_charts_core11.pointLabel)(item.label, labelFormatter, { position: labelPosition })
+                })),
+                selected
+              ),
               label: (0, import_charts_core11.buildDataLabel)(
                 {
                   show: true,
@@ -2231,6 +2292,7 @@ var DonutChart = React11.forwardRef(
       );
     }, [
       data,
+      selected,
       isEmpty,
       showTooltip,
       showLegend,
@@ -2259,7 +2321,10 @@ var DonutChart = React11.forwardRef(
       onReady: legend.attach,
       onCreated: onReady
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core11.generatePieChartDescription)(title, data, true) : void 0);
+    const accessibilityDescription = (0, import_charts_core11.withSelectionDescription)(
+      description || (!isEmpty ? (0, import_charts_core11.generatePieChartDescription)(title, data, true) : void 0),
+      selected
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ChartContainer,
       {

package/dist/index.js

@@ -454,8 +454,12 @@ import {
   THEME_DARK as THEME_DARK2,
   toPercentStack,
   withPointLabels,
+  withGhostSeries,
   withReferenceMarks,
-  withZoomInset
+  withZoomInset,
+  selectionShowsSymbols,
+  withSelectedPoints,
+  withSelectionDescription
 } from "@classic-homes/charts-core";
 
 // src/lib/events.ts
@@ -862,6 +866,7 @@ var LineChart = React6.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     onHover,
     class: className,
@@ -896,16 +901,21 @@ var LineChart = React6.forwardRef(
       const series = data.series.map((source, index) => ({
         name: source.name,
         type: "line",
-        data: withForecastPoints(
-          withPointLabels(plotted[index].data, source.labels, formatters.label, {
-            position: "top"
-          }),
-          source,
-          showDataPoints ? 6 : 0
+        data: withSelectedPoints(
+          withForecastPoints(
+            withPointLabels(plotted[index].data, source.labels, formatters.label, {
+              position: "top"
+            }),
+            source,
+            showDataPoints ? 6 : 0
+          ),
+          data.categories,
+          selected,
+          { pointSize: showDataPoints ? 6 : 0, ringColor: chartColors.surface }
         ),
         smooth,
-        // Forecast points show even when the others are hidden (size 0)
-        showSymbol: showSymbol || forecastStart(source) !== void 0,
+        // Forecast and selected points show even when the others are hidden (size 0)
+        showSymbol: showSymbol || forecastStart(source) !== void 0 || selectionShowsSymbols(selected),
         symbolSize: showDataPoints ? 6 : 0,
         connectNulls,
         stack: stacked ? "Total" : void 0,
@@ -979,12 +989,17 @@ var LineChart = React6.forwardRef(
             formatters.axis(yAxisConfig)
           ),
           series: withForecastLines(
-            withReferenceMarks(series, referenceLines, referenceBands, {
-              valueAxis: "y",
-              format: formatters.format,
-              color: chartColors.reference,
-              bandColor: chartColors.referenceBand
-            }),
+            withReferenceMarks(
+              withGhostSeries(series, data.series),
+              referenceLines,
+              referenceBands,
+              {
+                valueAxis: "y",
+                format: formatters.format,
+                color: chartColors.reference,
+                bandColor: chartColors.referenceBand
+              }
+            ),
             data.series,
             {
               colors: data.series.map(
@@ -997,6 +1012,7 @@ var LineChart = React6.forwardRef(
       );
     }, [
       data,
+      selected,
       isEmpty,
       showTooltip,
       showLegend,
@@ -1037,7 +1053,10 @@ var LineChart = React6.forwardRef(
       onCreated: onReady
     });
     const format = resolveValueFormatter(valueFormat, locale);
-    const accessibilityDescription = description || (!isEmpty ? generateLineChartDescription(title, data, format) : void 0);
+    const accessibilityDescription = withSelectionDescription(
+      description || (!isEmpty ? generateLineChartDescription(title, data, format) : void 0),
+      selected
+    );
     return /* @__PURE__ */ jsx7(
       ChartContainer,
       {
@@ -1091,6 +1110,7 @@ import {
   forecastTagLookup as forecastTagLookup2,
   withForecastBars,
   formatValue,
+  ghostStackId,
   generateBarChartDescription,
   getChartColors as getChartColors2,
   gridInset as gridInset2,
@@ -1101,9 +1121,14 @@ import {
   stackTotals,
   toPercentStack as toPercentStack2,
   withEndLabelInset,
+  withGhostSeries as withGhostSeries2,
   withPointLabels as withPointLabels2,
   withReferenceMarks as withReferenceMarks2,
-  withZoomInset as withZoomInset2
+  withZoomInset as withZoomInset2,
+  GHOST_BAR_OPACITY,
+  isGhostSeries,
+  withSelectedBars,
+  withSelectionDescription as withSelectionDescription2
 } from "@classic-homes/charts-core";
 import { jsx as jsx8 } from "react/jsx-runtime";
 echarts4.use([
@@ -1154,6 +1179,7 @@ var BarChart = React7.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     onHover,
     class: className,
@@ -1203,39 +1229,48 @@ var BarChart = React7.forwardRef(
       const labelPosition = isHorizontal ? "right" : "top";
       const zoomAxis = isHorizontal ? "y" : "x";
       const legendBottom = builtInLegend && (legendConfig?.position ?? "bottom") === "bottom";
-      const stackIds = data.series.map(() => stacked ? "Total" : void 0);
-      const series = data.series.map((source, index) => ({
-        name: source.name,
-        type: "bar",
-        data: withForecastBars(
-          withPointLabels2(plotted[index].data, source.labels, formatters.label, {
-            position: labelPosition
+      const stackIds = data.series.map((s) => ghostStackId(stacked ? "Total" : void 0, s));
+      const series = withGhostSeries2(
+        data.series.map((source, index) => ({
+          name: source.name,
+          type: "bar",
+          data: withSelectedBars(
+            withForecastBars(
+              withPointLabels2(plotted[index].data, source.labels, formatters.label, {
+                position: labelPosition
+              }),
+              source,
+              source.color || chartColors.series[index % chartColors.series.length]
+            ),
+            data.categories,
+            selected,
+            isGhostSeries(source) ? GHOST_BAR_OPACITY : 1
+          ),
+          stack: stackIds[index],
+          itemStyle: {
+            ...source.color && { color: source.color },
+            borderRadius: barCornerRadius(isHorizontal, stackIds, index)
+          },
+          label: buildDataLabel2({ show: true, position: labelPosition }, void 0, {
+            show: showValues,
+            formatter: formatters.label,
+            getLabel
           }),
-          source,
-          source.color || chartColors.series[index % chartColors.series.length]
-        ),
-        stack: stackIds[index],
-        itemStyle: {
-          ...source.color && { color: source.color },
-          borderRadius: barCornerRadius(isHorizontal, stackIds, index)
-        },
-        label: buildDataLabel2({ show: true, position: labelPosition }, void 0, {
-          show: showValues,
-          formatter: formatters.label,
-          getLabel
-        }),
-        emphasis: {
-          focus: "series"
-        }
-      }));
+          emphasis: {
+            focus: "series"
+          }
+        })),
+        data.series
+      );
       const format2 = resolveValueFormatter2(valueFormat, locale);
-      const stackedSeries = data.series.map((s) => ({ data: s.data }));
+      const isSolid = (index) => data.series[index].variant !== "ghost";
+      const stackedSeries = data.series.filter((_, index) => isSolid(index)).map((s) => ({ data: s.data }));
       const totalSeries = showTotal ? buildStackTotalSeries(data.categories, stackedSeries, {
         stacked,
         position: labelPosition,
         format: format2
       }) : [];
-      const endLabels = !isHorizontal ? [] : totalSeries.length ? [...stackTotals(stackedSeries, stacked).values()].flat().map((t) => formatValue(t, format2)) : showValues ? plotted.flatMap((s) => s.data.map((value) => formatValue(value, formatters.format))) : [];
+      const endLabels = !isHorizontal ? [] : totalSeries.length ? [...stackTotals(stackedSeries, stacked).values()].flat().map((t) => formatValue(t, format2)) : showValues ? plotted.filter((_, index) => isSolid(index)).flatMap((s) => s.data.map((value) => formatValue(value, formatters.format))) : [];
       return mergeChartOption2(
         {
           grid: {
@@ -1293,6 +1328,7 @@ var BarChart = React7.forwardRef(
       );
     }, [
       data,
+      selected,
       isEmpty,
       showTooltip,
       showLegend,
@@ -1331,7 +1367,10 @@ var BarChart = React7.forwardRef(
       onCreated: onReady
     });
     const format = resolveValueFormatter2(valueFormat, locale);
-    const accessibilityDescription = description || (!isEmpty ? generateBarChartDescription(title, data, format) : void 0);
+    const accessibilityDescription = withSelectionDescription2(
+      description || (!isEmpty ? generateBarChartDescription(title, data, format) : void 0),
+      selected
+    );
     const resolvedHeight = isHorizontal ? resolveChartHeight(height, data?.categories?.length ?? 0, {
       rowHeight,
       minHeight,
@@ -1386,7 +1425,9 @@ import {
   mergeChartOption as mergeChartOption3,
   pointLabel,
   resolveValueFormatter as resolveValueFormatter3,
-  sliceTable
+  sliceTable,
+  withSelectedSlices,
+  withSelectionDescription as withSelectionDescription3
 } from "@classic-homes/charts-core";
 import { jsx as jsx9 } from "react/jsx-runtime";
 echarts5.use([EChartsPieChart, TooltipComponent3, LegendComponent3, TitleComponent3, CanvasRenderer4]);
@@ -1422,6 +1463,7 @@ var PieChart = React8.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     class: className,
     ...props
@@ -1471,12 +1513,15 @@ var PieChart = React8.forwardRef(
               type: "pie",
               radius: innerRadius ? [innerRadius, "70%"] : "70%",
               center: legendCenter(legendConfig, showLegend && !customLegend, ["50%", "45%"]),
-              data: data.map((item) => ({
-                name: item.name,
-                value: item.value,
-                itemStyle: item.color ? { color: item.color } : void 0,
-                label: pointLabel(item.label, labelFormatter, { position: labelPosition })
-              })),
+              data: withSelectedSlices(
+                data.map((item) => ({
+                  name: item.name,
+                  value: item.value,
+                  itemStyle: item.color ? { color: item.color } : void 0,
+                  label: pointLabel(item.label, labelFormatter, { position: labelPosition })
+                })),
+                selected
+              ),
               label: buildDataLabel3(
                 {
                   show: true,
@@ -1500,6 +1545,7 @@ var PieChart = React8.forwardRef(
       );
     }, [
       data,
+      selected,
       isEmpty,
       showTooltip,
       showLegend,
@@ -1525,7 +1571,10 @@ var PieChart = React8.forwardRef(
       onReady: legend.attach,
       onCreated: onReady
     });
-    const accessibilityDescription = description || (!isEmpty ? generatePieChartDescription(title, data, false) : void 0);
+    const accessibilityDescription = withSelectionDescription3(
+      description || (!isEmpty ? generatePieChartDescription(title, data, false) : void 0),
+      selected
+    );
     return /* @__PURE__ */ jsx9(
       ChartContainer,
       {
@@ -1589,8 +1638,12 @@ import {
   THEME_DARK as THEME_DARK3,
   toPercentStack as toPercentStack3,
   withPointLabels as withPointLabels3,
+  withGhostSeries as withGhostSeries3,
   withReferenceMarks as withReferenceMarks3,
-  withZoomInset as withZoomInset3
+  withZoomInset as withZoomInset3,
+  selectionShowsSymbols as selectionShowsSymbols2,
+  withSelectedPoints as withSelectedPoints2,
+  withSelectionDescription as withSelectionDescription4
 } from "@classic-homes/charts-core";
 import { jsx as jsx10 } from "react/jsx-runtime";
 echarts6.use([
@@ -1641,6 +1694,8 @@ var AreaChart = React9.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    showDataPoints = false,
+    selected,
     onClick,
     onHover,
     class: className,
@@ -1670,18 +1725,25 @@ var AreaChart = React9.forwardRef(
       });
       const plotted = isPercent ? toPercentStack3(data.series) : data.series;
       const getLabel = seriesLabelLookup3(data.series);
-      const showSymbol = showLabels || hasPointLabels2(data.series);
+      const showSymbol = showDataPoints || showLabels || hasPointLabels2(data.series);
+      const pointSize = showDataPoints ? 6 : showSymbol ? 4 : 0;
       const legendBottom = builtInLegend && (legendConfig?.position ?? "bottom") === "bottom";
       const series = data.series.map((source, index) => {
         const base = source.color || chartColors.series[index % chartColors.series.length];
         return {
           name: source.name,
           type: "line",
-          data: withForecastPoints2(
-            withPointLabels3(plotted[index].data, source.labels, formatters.label, {
-              position: "top"
-            }),
-            source
+          data: withSelectedPoints2(
+            withForecastPoints2(
+              withPointLabels3(plotted[index].data, source.labels, formatters.label, {
+                position: "top"
+              }),
+              source,
+              pointSize
+            ),
+            data.categories,
+            selected,
+            { pointSize, ringColor: chartColors.surface }
           ),
           smooth,
           connectNulls,
@@ -1702,8 +1764,9 @@ var AreaChart = React9.forwardRef(
           emphasis: {
             focus: "series"
           },
-          // Forecast points show even when the others are hidden (size 0)
-          ...forecastStart2(source) === void 0 ? { showSymbol } : { showSymbol: true, symbolSize: showSymbol ? 4 : 0 }
+          // Forecast and selected points show even when the others are hidden (size 0)
+          showSymbol: showSymbol || forecastStart2(source) !== void 0 || selectionShowsSymbols2(selected),
+          symbolSize: pointSize
         };
       });
       return mergeChartOption4(
@@ -1762,12 +1825,17 @@ var AreaChart = React9.forwardRef(
             formatters.axis(yAxisConfig)
           ),
           series: withForecastLines2(
-            withReferenceMarks3(series, referenceLines, referenceBands, {
-              valueAxis: "y",
-              format: formatters.format,
-              color: chartColors.reference,
-              bandColor: chartColors.referenceBand
-            }),
+            withReferenceMarks3(
+              withGhostSeries3(series, data.series),
+              referenceLines,
+              referenceBands,
+              {
+                valueAxis: "y",
+                format: formatters.format,
+                color: chartColors.reference,
+                bandColor: chartColors.referenceBand
+              }
+            ),
             data.series,
             {
               colors: data.series.map(
@@ -1780,6 +1848,8 @@ var AreaChart = React9.forwardRef(
       );
     }, [
       data,
+      selected,
+      showDataPoints,
       isEmpty,
       showTooltip,
       showLegend,
@@ -1819,7 +1889,10 @@ var AreaChart = React9.forwardRef(
       onCreated: onReady
     });
     const format = resolveValueFormatter4(valueFormat, locale);
-    const accessibilityDescription = description || (!isEmpty ? generateAreaChartDescription(title, data, format) : void 0);
+    const accessibilityDescription = withSelectionDescription4(
+      description || (!isEmpty ? generateAreaChartDescription(title, data, format) : void 0),
+      selected
+    );
     return /* @__PURE__ */ jsx10(
       ChartContainer,
       {
@@ -2160,7 +2233,9 @@ import {
   pointLabel as pointLabel2,
   resolveValueFormatter as resolveValueFormatter6,
   sliceTable as sliceTable2,
-  THEME_DARK as THEME_DARK4
+  THEME_DARK as THEME_DARK4,
+  withSelectedSlices as withSelectedSlices2,
+  withSelectionDescription as withSelectionDescription5
 } from "@classic-homes/charts-core";
 import { jsx as jsx12 } from "react/jsx-runtime";
 echarts8.use([EChartsPieChart2, TooltipComponent6, LegendComponent6, TitleComponent6, CanvasRenderer7]);
@@ -2198,6 +2273,7 @@ var DonutChart = React11.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     class: className,
     ...props
@@ -2294,12 +2370,15 @@ var DonutChart = React11.forwardRef(
               radius: [innerRadius, "70%"],
               center: pieCenter,
               avoidLabelOverlap: true,
-              data: data.map((item) => ({
-                name: item.name,
-                value: item.value,
-                itemStyle: item.color ? { color: item.color } : void 0,
-                label: pointLabel2(item.label, labelFormatter, { position: labelPosition })
-              })),
+              data: withSelectedSlices2(
+                data.map((item) => ({
+                  name: item.name,
+                  value: item.value,
+                  itemStyle: item.color ? { color: item.color } : void 0,
+                  label: pointLabel2(item.label, labelFormatter, { position: labelPosition })
+                })),
+                selected
+              ),
               label: buildDataLabel6(
                 {
                   show: true,
@@ -2326,6 +2405,7 @@ var DonutChart = React11.forwardRef(
       );
     }, [
       data,
+      selected,
       isEmpty,
       showTooltip,
       showLegend,
@@ -2354,7 +2434,10 @@ var DonutChart = React11.forwardRef(
       onReady: legend.attach,
       onCreated: onReady
     });
-    const accessibilityDescription = description || (!isEmpty ? generatePieChartDescription2(title, data, true) : void 0);
+    const accessibilityDescription = withSelectionDescription5(
+      description || (!isEmpty ? generatePieChartDescription2(title, data, true) : void 0),
+      selected
+    );
     return /* @__PURE__ */ jsx12(
       ChartContainer,
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/charts-react",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "React ECharts components for Classic Theme",
   "type": "module",
   "main": "dist/index.cjs",