@cdc/chart 4.26.1 → 4.26.2

package/package.json

@@ -1,84 +1,82 @@
 {
   "name": "@cdc/chart",
-  "version": "4.26.1",
+  "version": "4.26.2",
   "description": "React component for visualizing tabular data in various types of charts",
-  "moduleName": "CdcChart",
-  "main": "dist/cdcchart",
-  "type": "module",
-  "scripts": {
-    "start": "vite --open",
-    "build": "vite build",
-    "preview": "vite preview",
-    "graph": "nx graph",
-    "prepublishOnly": "lerna run --scope @cdc/chart build",
-    "test": "vitest run --reporter verbose",
-    "test-watch": "vitest watch --reporter verbose",
-    "test-watch:ui": "vitest --ui"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/CDCgov/cdc-open-viz",
-    "directory": "packages/chart"
-  },
-  "author": "Matthew Pallansch <mpallansch@adittech.com>",
-  "bugs": {
-    "url": "https://github.com/CDCgov/cdc-open-viz/issues"
-  },
   "license": "Apache-2.0",
+  "author": "Matthew Pallansch <mpallansch@adittech.com>",
+  "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/core": "^4.26.1",
+    "@cdc/core": "^4.26.2",
     "@hello-pangea/dnd": "^16.2.0",
     "@react-spring/web": "^9.7.5",
     "@rollup/plugin-dsv": "^3.0.2",
-    "@visx/annotation": "^3.3.0",
-    "@visx/axis": "3.12.0",
+    "@visx/annotation": "^3.12.0",
+    "@visx/axis": "^3.12.0",
     "@visx/brush": "^3.12.0",
-    "@visx/curve": "3.12.0",
+    "@visx/curve": "^3.12.0",
     "@visx/drag": "^3.12.0",
-    "@visx/event": "3.12.0",
-    "@visx/glyph": "3.12.0",
-    "@visx/gradient": "3.12.0",
-    "@visx/legend": "3.12.0",
-    "@visx/marker": "3.12.0",
-    "@visx/mock-data": "3.12.0",
-    "@visx/pattern": "^3.0.0",
-    "@visx/responsive": "^2.10.0",
-    "@visx/scale": "3.12.0",
-    "@visx/shape": "3.12.0",
-    "@visx/stats": "3.12.0",
-    "@visx/text": "3.12.0",
-    "@visx/tooltip": "3.12.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "chroma-js": "3.1.2",
-    "d3-array": "3.2.4",
-    "d3-format": "^3.1.0",
+    "@visx/event": "^3.12.0",
+    "@visx/glyph": "^3.12.0",
+    "@visx/gradient": "^3.12.0",
+    "@visx/legend": "^3.12.0",
+    "@visx/marker": "^3.12.0",
+    "@visx/mock-data": "^3.12.0",
+    "@visx/pattern": "^3.12.0",
+    "@visx/responsive": "^3.12.0",
+    "@visx/scale": "^3.12.0",
+    "@visx/shape": "^3.12.0",
+    "@visx/stats": "^3.12.0",
+    "@visx/text": "^3.12.0",
+    "@visx/tooltip": "^3.12.0",
+    "@vitejs/plugin-react": "^5.1.2",
+    "chroma-js": "^3.1.2",
+    "d3-array": "^3.2.4",
+    "d3-format": "^3.1.2",
     "d3-sankey": "^0.12.3",
-    "d3-time-format": "4.1.0",
-    "dompurify": "^3.1.5",
-    "html-react-parser": "5.2.3",
+    "d3-time-format": "^4.1.0",
+    "dompurify": "^3.3.1",
+    "html-react-parser": "^5.2.3",
     "js-base64": "^2.5.2",
-    "lodash": "^4.17.21",
-    "papaparse": "5.5.2",
+    "lodash": "^4.17.23",
+    "papaparse": "^5.5.2",
     "react-accessible-accordion": "^5.0.1",
-    "react-icons": "5.5.0",
+    "react-icons": "^5.5.0",
     "react-tooltip": "5.8.2-beta.3",
     "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.89.2",
-    "use-debounce": "^6.0.1",
-    "vite": "^5.4.21",
+    "use-debounce": "^10.1.0",
+    "vite": "^7.3.1",
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^4.2.0",
-    "whatwg-fetch": "3.6.20"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "whatwg-fetch": "^3.6.20"
   },
-  "gitHead": "7e3b27098c4eb7a24bc9c3654ad53f88d6419f16",
   "devDependencies": {
     "@types/d3-array": "^3.2.1",
     "@types/d3-format": "^3.0.4",
     "@types/d3-sankey": "^0.12.4",
     "@types/d3-time-format": "^4.0.3"
-  }
+  },
+  "gitHead": "be3413e8e1149abf94225108f86a7910f56e0616",
+  "main": "dist/cdcchart",
+  "moduleName": "CdcChart",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CDCgov/cdc-open-viz",
+    "directory": "packages/chart"
+  },
+  "scripts": {
+    "build": "vite build",
+    "graph": "nx graph",
+    "prepublishOnly": "lerna run --scope @cdc/chart build",
+    "preview": "vite preview",
+    "start": "vite --open",
+    "test": "vitest run --reporter verbose",
+    "test-watch": "vitest watch --reporter verbose",
+    "test-watch:ui": "vitest --ui"
+  },
+  "type": "module"
 }

package/src/CdcChartComponent.tsx

@@ -22,15 +22,16 @@ import { Runtime } from '@cdc/core/types/Runtime'
 import { Label } from './types/Label'
 // External Libraries
 import ParentSize from '@visx/responsive/lib/components/ParentSize'
-import { timeParse, timeFormat } from 'd3-time-format'
+import { timeParse } from 'd3-time-format'
 import parse from 'html-react-parser'
 import _ from 'lodash'
 // Primary Components
 import ConfigContext, { ChartDispatchContext } from './ConfigContext'
 import PieChart from './components/PieChart'
+import RadarChart from './components/RadarChart'
 import SankeyChart from './components/Sankey'
 import LinearChart from './components/LinearChart'
-import { isDateScale } from '@cdc/core/helpers/cove/date'
+import { isDateScale, formatDate as coreFormatDate } from '@cdc/core/helpers/cove/date'
 
 import { twoColorPalette } from '@cdc/core/data/colorPalettes'
 import { filterChartColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
@@ -53,6 +54,7 @@ import Loading from '@cdc/core/components/Loading'
 import Filters from '@cdc/core/components/Filters'
 import MediaControls from '@cdc/core/components/MediaControls'
 import Annotation from './components/Annotations'
+import { getVisibleAnnotations } from './components/Annotations/helpers/getVisibleAnnotations'
 // Core Helpers
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
@@ -133,7 +135,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
     coveLoadedEventRan,
     imageId,
     seriesHighlight,
-    colorScale
+    colorScale,
+    brushData
   } = state
   const { description, visualizationType } = config
   const svgRef = useRef(null)
@@ -263,8 +266,39 @@ const CdcChart: React.FC<CdcChartProps> = ({
       delete defaultsWithoutPalette.general?.palette
     }
 
+    // Override palette defaults for Line charts specifically
+    if (loadedConfig?.visualizationType === 'Line' && !loadedConfig?.general?.palette) {
+      if (!defaultsWithoutPalette.general) {
+        defaultsWithoutPalette.general = {}
+      }
+      defaultsWithoutPalette.general.palette = {
+        isReversed: false,
+        version: '2.0',
+        name: 'divergent_blue_cyan'
+      }
+    }
+
+    // Override palette defaults for Horizon Chart specifically
+    if (loadedConfig?.visualizationType === 'Horizon Chart' && !loadedConfig?.general?.palette) {
+      if (!defaultsWithoutPalette.general) {
+        defaultsWithoutPalette.general = {}
+      }
+      defaultsWithoutPalette.general.palette = {
+        isReversed: false,
+        version: '2.0',
+        name: 'sequential_blue'
+      }
+    }
+
     let newConfig = { ...defaultsWithoutPalette, ...loadedConfig }
 
+    // Ensure Horizon Chart has enough palette colors for all layers
+    if (newConfig.visualizationType === 'Horizon Chart') {
+      const numLayers = newConfig.horizon?.numLayers ?? 4
+      const currentCount = _.get(newConfig, 'general.paletteColorCount', 4)
+      _.set(newConfig, 'general.paletteColorCount', Math.max(currentCount, numLayers))
+    }
+
     _.defaultsDeep(newConfig, {
       table: { showVertical: false }
     })
@@ -385,6 +419,11 @@ const CdcChart: React.FC<CdcChartProps> = ({
       newConfig.runtime.seriesKeys = _.uniq(pieData.map(d => d[newConfig.xAxis.dataKey]))
       newConfig.runtime.seriesLabelsAll = newConfig.runtime.seriesKeys
       newConfig.runtime.isPieChart = true // Flag to know when to use derived keys
+    } else if (newConfig.visualizationType === 'Radar') {
+      // Radar chart: seriesKeys are the entity names from xAxis.dataKey
+      const radarData = currentData.length > 0 ? currentData : newExcludedData
+      newConfig.runtime.seriesKeys = _.uniq(radarData.map(d => d[newConfig.xAxis.dataKey]))
+      newConfig.runtime.seriesLabelsAll = newConfig.runtime.seriesKeys
     } else {
       const finalData = dataOverride || newConfig.formattedData || newConfig.data
       newConfig.runtime.seriesKeys = (newConfig.runtime.series || []).flatMap(series => {
@@ -458,6 +497,22 @@ const CdcChart: React.FC<CdcChartProps> = ({
       newConfig.visualizationSubType = 'stacked'
     }
 
+    if (newConfig.visualizationType === 'Horizon Chart' && newConfig.series) {
+      // Apply horizon defaults if not set
+      newConfig.horizon = {
+        numLayers: 4,
+        mode: 'offset', // Always offset for now, mirror hidden from UI
+        bandGap: 15,
+        bottomPadding: 15,
+        ...newConfig.horizon
+      }
+
+      // Set categorical as default xAxis type for horizon charts if not already set
+      if (!newConfig.xAxis.type) {
+        newConfig.xAxis.type = 'categorical'
+      }
+    }
+
     if (isHorizontalVariant) {
       // For horizontal charts, axes are swapped, so processedYAxis goes to runtime.xAxis and vice versa
       const horizontalXAxisSource = _.cloneDeep((newConfig.yAxis as any)?.yAxis || newConfig.yAxis)
@@ -618,7 +673,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
         if (newData) {
           newConfig.data = newData
         }
-      } else if (newConfig.formattedData) {
+      } else if (newConfig.formattedData && Array.isArray(newConfig.formattedData)) {
         newConfig.data = newConfig.formattedData
       } else if (newConfig.dataDescription) {
         // For dashboard contexts, get data from datasets if config.data is undefined
@@ -654,7 +709,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
           updateConfig(preparedConfig, preppedData.data)
         }
       } catch (err) {
-        console.error('Could not Load!')
+        console.error('Could not Load!', err)
       }
     }
 
@@ -746,6 +801,16 @@ const CdcChart: React.FC<CdcChartProps> = ({
     }
   }, [config, stateData]) // eslint-disable-line
 
+  // Clear brush selection when brush slider is disabled
+  useEffect(() => {
+    const isBrushDisabled = !config?.xAxis?.brushActive
+    const hasBrushData = Array.isArray(brushData) && brushData.length > 0
+
+    if (isBrushDisabled && hasBrushData) {
+      dispatch({ type: 'SET_BRUSH_DATA', payload: [] })
+    }
+  }, [config?.xAxis?.brushActive, brushData])
+
   // Updates runtime axis labels when config or data changes when using markup variables
   useEffect(() => {
     if (
@@ -844,15 +909,11 @@ const CdcChart: React.FC<CdcChartProps> = ({
   const formatDate = (date, i, ticks) => {
     const displayFormat =
       config.runtime[section].dateDisplayFormat || config.runtime[section].dateParseFormat || '%Y-%m-%d'
-    let formattedDate = timeFormat(displayFormat)(date)
-    // Handle the case where all months work with '%b.' except for May
-    if (displayFormat?.includes('%b.') && formattedDate.includes('May.')) {
-      formattedDate = formattedDate.replace(/May\./g, 'May')
-    }
+    let formattedDate = coreFormatDate(displayFormat, date)
     // Show years only once
     if (config.xAxis.showYearsOnce && displayFormat?.includes('%Y') && ticks) {
       const prevDate = ticks[i - 1] ? ticks[i - 1].value : null
-      const prevFormattedDate = timeFormat(displayFormat)(prevDate)
+      const prevFormattedDate = coreFormatDate(displayFormat, prevDate)
       const year = formattedDate.match(/\d{4}/)
       const prevYear = prevFormattedDate.match(/\d{4}/)
       if (year && prevYear && year[0] === prevYear[0]) {
@@ -863,7 +924,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
   }
 
   const formatTooltipsDate = date => {
-    return timeFormat(config.tooltips.dateDisplayFormat)(date)
+    return coreFormatDate(config.tooltips.dateDisplayFormat, date)
   }
 
   // Format numeric data based on settings in config OR from passed in settings for Additional Columns
@@ -1118,6 +1179,12 @@ const CdcChart: React.FC<CdcChartProps> = ({
     return tableConfig
   }
 
+  // Transform and clean data for chart rendering
+  const transformedData = getTransformedData({ brushData: state.brushData, filteredData, excludedData, clean })
+
+  // Filter annotations to only those visible in current data view
+  const visibleAnnotations = getVisibleAnnotations(config.annotations, transformedData, config.xAxis?.dataKey)
+
   // Prevent render if loading
   let body = <Loading />
 
@@ -1209,7 +1276,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   />
                 )}
                 <SkipTo skipId={handleChartTabbing(config, legendId)} skipMessage='Skip Over Chart Container' />
-                {config.annotations?.length > 0 && (
+                {visibleAnnotations.length > 0 && (
                   <SkipTo
                     skipId={handleChartTabbing(config, legendId)}
                     skipMessage={`Skip over annotations`}
@@ -1239,7 +1306,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                     {/* All charts with LinearChart */}
                     {filteredData &&
                       filteredData.length > 0 &&
-                      !['Spark Line', 'Line', 'Sankey', 'Pie', 'Sankey'].includes(config.visualizationType) && (
+                      !['Spark Line', 'Line', 'Sankey', 'Pie', 'Radar'].includes(config.visualizationType) && (
                         <div ref={parentRef} style={{ width: `100%` }}>
                           <ParentSize>
                             {parent => (
@@ -1261,6 +1328,19 @@ const CdcChart: React.FC<CdcChartProps> = ({
                         )}
                       </ParentSize>
                     )}
+                    {/* Radar Chart */}
+                    {filteredData && filteredData.length > 0 && config.visualizationType === 'Radar' && (
+                      <ParentSize className='justify-content-center d-flex' style={{ width: `100%` }}>
+                        {parent => (
+                          <RadarChart
+                            ref={svgRef}
+                            parentWidth={parent.width}
+                            parentHeight={parent.height}
+                            interactionLabel={interactionLabel}
+                          />
+                        )}
+                      </ParentSize>
+                    )}
                     {/* Line Chart */}
                     {filteredData &&
                       filteredData.length > 0 &&
@@ -1382,7 +1462,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                       return (
                         <DataTable
                           /* changing the "key" will force the table to re-render
-                                  when the default sort changes while editing */
+                              when the default sort changes while editing */
                           key={dataTableDefaultSortBy}
                           config={dataTableConfig}
                           rawData={dataTableRawData}
@@ -1432,7 +1512,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                         </MediaControls.Section>
                       </div>
                     )}
-                {config?.annotations?.length > 0 && <Annotation.Dropdown />}
+                {visibleAnnotations.length > 0 && <Annotation.Dropdown />}
                 {/* show pdf or image button */}
                 {processedLegacyFootnotes && (
                   <section className='footnotes pt-2 mt-4'>{parse(processedLegacyFootnotes)}</section>
@@ -1505,10 +1585,11 @@ const CdcChart: React.FC<CdcChartProps> = ({
     setSharedFilterValue,
     svgRef,
     tableData: filteredData || excludedData,
-    transformedData: getTransformedData({ brushData: state.brushData, filteredData, excludedData, clean }),
+    transformedData,
     twoColorPalette,
     unfilteredData: stateData,
-    updateConfig
+    updateConfig,
+    visibleAnnotations
   }
 
   return (

package/src/_stories/Chart.Anchors.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, Story } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import exampleComboBarNonNumeric from './../../examples/feature/tests-date-exclusions/date-exclusions-config.json'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 export default {
   title: 'Components/Templates/Chart/Anchors',
@@ -15,17 +16,26 @@ export const Anchor_DateLinear: Story = {
   args: {
     config: exampleComboBarNonNumeric,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Anchor_Categorical: Story = {
   args: {
     config: editConfigKeys(exampleComboBarNonNumeric, [{ path: ['xAxis', 'type'], value: 'categorical' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
 export const Anchor_Date_Time: Story = {
   args: {
     config: editConfigKeys(exampleComboBarNonNumeric, [{ path: ['xAxis', 'type'], value: 'date-time' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }

package/src/_stories/Chart.BoxPlot.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import boxPlotConfig from './_mock/boxplot_multiseries.json'
 import Chart from '../CdcChartComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Box Plot',
@@ -17,6 +18,9 @@ export const BoxPlot_Vertical: Story = {
       title: 'Vertical Multiseries Box Plot',
       isEditor: false
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -29,6 +33,9 @@ export const BoxPlot_Horizontal: Story = {
       yAxis: { ...boxPlotConfig.yAxis, labelPlacement: 'Above Bar' }
     },
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

package/src/_stories/Chart.CI.stories.tsx

@@ -4,6 +4,7 @@ import lineChartDynamicCI from './_mock/line_chart_dynamic_ci.json'
 import lineChartNonDynamicCI from './_mock/line_chart_non_dynamic_ci.json'
 
 import Chart from '../CdcChartComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Confidence Intervals',
@@ -14,6 +15,9 @@ export const bar_chart_with_labels: Story = {
   args: {
     config: barChartCiLabels,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export const bar_chart_horizontal_labels: Story = {
@@ -24,6 +28,9 @@ export const bar_chart_horizontal_labels: Story = {
       yAxis: { ...barChartCiLabels.yAxis, displayNumbersOnBar: true }
     },
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -31,6 +38,9 @@ export const line_Chart_Dynamic_Confidence_Intervals: Story = {
   args: {
     config: lineChartDynamicCI,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -38,6 +48,9 @@ export const line_Chart_Non_Dynamic_Confidence_Intervals: Story = {
   args: {
     config: lineChartNonDynamicCI,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 export default meta

package/src/_stories/Chart.Combo.stories.tsx

@@ -2,6 +2,8 @@
 import React from 'react'
 import { Meta, Story } from '@storybook/react'
 import CdcChart from '@cdc/chart/src/CdcChart'
+import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 import comboChartConfig from './_mock/combo.json'
 
 export default {
@@ -16,3 +18,18 @@ ComboChart.args = {
   config: comboChartConfig,
   isEditor: true
 }
+ComboChart.play = async ({ canvasElement }) => {
+  await assertVisualizationRendered(canvasElement)
+}
+
+export const ComboChartWithBrush = Template.bind({})
+ComboChartWithBrush.args = {
+  config: editConfigKeys(comboChartConfig, [
+    { path: ['xAxis', 'brushActive'], value: true },
+    { path: ['xAxis', 'brushDefaultRecentDateCount'], value: 12 }
+  ]),
+  isEditor: true
+}
+ComboChartWithBrush.play = async ({ canvasElement }) => {
+  await assertVisualizationRendered(canvasElement)
+}

package/src/_stories/Chart.CustomColors.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import scatterPlotCustomColorConfig from './_mock/scatterplot_mock.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Custom Colors',
@@ -13,6 +14,9 @@ export const ScatterPlot: Story = {
   args: {
     config: scatterPlotCustomColorConfig,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

package/src/_stories/Chart.DynamicSeries.stories.tsx

@@ -3,6 +3,7 @@ import DynamicSeriesBarConfig from './_mock/dynamic_series_bar_config.json'
 import DynamicSeriesSuppression from './_mock/dynamic_series_suppression_mock.json'
 import { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Dynamic Series',
@@ -23,6 +24,9 @@ export const LineShowPoints: Story = {
       lineDatapointStyle: 'always show'
     },
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -30,6 +34,9 @@ export const LineSuppression: Story = {
   args: {
     config: DynamicSeriesSuppression,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -37,6 +44,9 @@ export const LineHoverPoints: Story = {
   args: {
     config: DynamicSeriesConfig,
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -44,6 +54,9 @@ export const Bar_Vertical: Story = {
   args: {
     config: DynamicSeriesBarConfig,
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -51,6 +64,9 @@ export const Bar_Horizontal: Story = {
   args: {
     config: { ...DynamicSeriesBarConfig, orientation: 'horizontal' },
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -62,6 +78,9 @@ export const Legend_Order: Story = {
       legend: { ...DynamicSeriesBarConfig, order: 'desc' }
     },
     isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

package/src/_stories/Chart.Filters.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
 import scatterPlotDownloadImage from './_mock/scatterplot-image-download.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Filters',
@@ -13,6 +14,9 @@ type Story = StoryObj<typeof Chart>
 export const Tab_Simple: Story = {
   args: {
     config: editConfigKeys(scatterPlotDownloadImage, [{ path: ['filters', '0', 'filterStyle'], value: 'tab-simple' }])
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

package/src/_stories/Chart.Forecast.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import Chart from '../CdcChart'
 import forecastComboWithGaps from './_mock/forecast_combo_with_gaps.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Forecast Chart',
@@ -30,6 +31,9 @@ export const Forecast_Combo_With_Gaps: Story = {
           'A combo chart with forecast confidence intervals that demonstrates proper gap handling. The forecast areas and lines are split into separate segments when gaps are detected, preventing misleading connections across missing data periods. Invalid data points (NA values) are automatically filtered out.'
       }
     }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }