@cdc/chart 4.24.11 → 4.24.12-2

package/src/_stories/_mock/short_dates.json

@@ -0,0 +1,288 @@
+{
+  "annotations": [],
+  "type": "chart",
+  "debugSvg": false,
+  "chartMessage": { "noData": "No Data Available" },
+  "title": "",
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "theme": "theme-blue",
+  "animate": false,
+  "fontSize": "medium",
+  "lineDatapointStyle": "hover",
+  "lineDatapointColor": "Same as Line",
+  "barHasBorder": "false",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "regular",
+  "barStyle": "flat",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "isResponsiveTicks": false,
+  "general": {
+    "annotationDropdownText": "Annotations",
+    "showDownloadButton": false,
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "showZeroValueData": true,
+    "hideNullValue": true,
+    "showAnnotationDropdown": false
+  },
+  "padding": { "left": 5, "right": 5 },
+  "preliminaryData": [],
+  "yAxis": {
+    "hideAxis": true,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": true,
+    "size": "50",
+    "gridLines": true,
+    "enablePadding": true,
+    "min": "0",
+    "max": "99",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "rightHideAxis": true,
+    "rightAxisSize": 0,
+    "rightLabel": "",
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "numTicks": "5",
+    "axisPadding": 0,
+    "scalePadding": 10,
+    "tickRotation": 0,
+    "anchors": [],
+    "shoMissingDataLabel": true,
+    "showMissingDataLine": true,
+    "categories": [],
+    "label": "",
+    "maxValue": 108.9
+  },
+  "boxplot": {
+    "plots": [],
+    "borders": "true",
+    "plotOutlierValues": false,
+    "plotNonOutlierValues": true,
+    "labels": {
+      "q1": "Lower Quartile",
+      "q2": "q2",
+      "q3": "Upper Quartile",
+      "q4": "q4",
+      "minimum": "Minimum",
+      "maximum": "Maximum",
+      "mean": "Mean",
+      "median": "Median",
+      "sd": "Standard Deviation",
+      "iqr": "Interquartile Range",
+      "total": "Total",
+      "outliers": "Outliers",
+      "values": "Values",
+      "lowerBounds": "Lower Bounds",
+      "upperBounds": "Upper Bounds"
+    },
+    "firstQuartilePercentage": 25,
+    "thirdQuartilePercentage": 75,
+    "boxWidthPercentage": 40,
+    "legend": { "showHowToReadText": false, "howToReadText": "" }
+  },
+  "topAxis": { "hasLine": false },
+  "isLegendValue": false,
+  "barThickness": 0.35,
+  "barHeight": 25,
+  "barSpace": 15,
+  "heights": { "vertical": "250", "horizontal": 750, "mobileVertical": "150" },
+  "xAxis": {
+    "sortDates": false,
+    "anchors": [],
+    "type": "date-time",
+    "showTargetLabel": true,
+    "targetLabel": "Target",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "0",
+    "tickRotation": 0,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "6",
+    "labelOffset": 0,
+    "axisPadding": 200,
+    "target": 0,
+    "maxTickRotation": "45",
+    "padding": "0",
+    "showYearsOnce": false,
+    "sortByRecentDate": false,
+    "dataKey": "week_end",
+    "label": "",
+    "dateParseFormat": "%Y-%m-%d",
+    "dateDisplayFormat": "%b. %-d %Y",
+    "axisBBox": 24.939998626708984,
+    "tickWidthMax": 108,
+    "viewportNumTicks": { "xxs": "4" },
+    "manual": true
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showDownloadLinkBelow": true,
+    "indexLabel": "Week Ending",
+    "download": true,
+    "showVertical": true,
+    "dateDisplayFormat": "",
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "show": true
+  },
+  "orientation": "vertical",
+  "color": "pinkpurple",
+  "columns": {},
+  "legend": {
+    "hide": false,
+    "behavior": "isolate",
+    "axisAlign": true,
+    "singleRow": true,
+    "colorCode": "",
+    "reverseLabelOrder": false,
+    "description": "",
+    "dynamicLegend": false,
+    "dynamicLegendDefaultText": "Show All",
+    "dynamicLegendItemLimit": 5,
+    "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
+    "dynamicLegendChartMessage": "Select Options from the Legend",
+    "label": "",
+    "lineMode": false,
+    "verticalSorted": false,
+    "highlightOnHover": false,
+    "hideSuppressedLabels": false,
+    "hideSuppressionLink": false,
+    "seriesHighlight": [],
+    "style": "lines",
+    "subStyle": "linear blocks",
+    "tickRotation": "",
+    "hideBorder": { "side": false, "topBottom": true },
+    "position": "bottom"
+  },
+  "brush": { "height": 25, "active": false },
+  "exclusions": { "active": false, "keys": [] },
+  "palette": "qualitative-bold",
+  "isPaletteReversed": false,
+  "twoColor": { "palette": "monochrome-1", "isPaletteReversed": false },
+  "labels": false,
+  "dataFormat": {
+    "commas": true,
+    "prefix": "",
+    "suffix": " percent vaccinated",
+    "abbreviated": true,
+    "bottomSuffix": "",
+    "bottomPrefix": "",
+    "bottomAbbreviated": false,
+    "roundTo": "1",
+    "onlyShowTopPrefixSuffix": true
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true,
+    "verticalHoverLine": true,
+    "horizontalHoverLine": false
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "highlightedBarValues": [],
+  "series": [
+    { "dataKey": "Adults", "type": "Line", "axis": "Left", "tooltip": true, "name": "Adults (18+)" },
+    { "dataKey": "Children", "type": "dashed-md", "axis": "Left", "tooltip": true, "name": "Children (under 18)" }
+  ],
+  "tooltips": { "opacity": 90, "singleSeries": false, "dateDisplayFormat": "%B %-d, %Y" },
+  "forestPlot": {
+    "startAt": 0,
+    "colors": { "line": "", "shape": "" },
+    "lineOfNoEffect": { "show": true },
+    "type": "",
+    "pooledResult": { "diamondHeight": 5, "column": "" },
+    "estimateField": "",
+    "estimateRadius": "",
+    "shape": "square",
+    "rowHeight": 20,
+    "description": { "show": true, "text": "description", "location": 0 },
+    "result": { "show": true, "text": "result", "location": 100 },
+    "radius": { "min": 2, "max": 10, "scalingColumn": "" },
+    "regression": { "lower": 0, "upper": 0, "estimateField": 0 },
+    "leftWidthOffset": 0,
+    "rightWidthOffset": 0,
+    "showZeroLine": false,
+    "leftLabel": "",
+    "rightLabel": ""
+  },
+  "area": { "isStacked": false },
+  "sankey": {
+    "title": { "defaultColor": "black" },
+    "iterations": 1,
+    "rxValue": 0.9,
+    "overallSize": { "width": 900, "height": 700 },
+    "margin": { "margin_y": 25, "margin_x": 0 },
+    "nodeSize": { "nodeWidth": 26, "nodeHeight": 40 },
+    "nodePadding": 55,
+    "nodeFontColor": "black",
+    "nodeColor": { "default": "#ff8500", "inactive": "#808080" },
+    "linkColor": { "default": "#ffc900", "inactive": "#D3D3D3" },
+    "opacity": {
+      "nodeOpacityDefault": 1,
+      "nodeOpacityInactive": 0.1,
+      "LinkOpacityDefault": 1,
+      "LinkOpacityInactive": 0.1
+    },
+    "storyNodeFontColor": "#006778",
+    "storyNodeText": [],
+    "nodeValueStyle": { "textBefore": "(", "textAfter": ")" },
+    "data": []
+  },
+  "visualizationType": "Line",
+  "customColors": ["#f06f19", "#f06f19", "#f06f19", "#000000", "#0A6C75", "#C0F2FD", "#C0F2FD", "#C0F2FD", "#C0F2FD"],
+  "dataFileName": "/wcms/vizdata/Respitory_Viruses/NISVaccinationsCumulative7a.json",
+  "dataFileSourceType": "url",
+  "dataUrl": "https://www.cdc.gov/wcms/vizdata/Respitory_Viruses/NISVaccinationsCumulative7a.json",
+  "dataDescription": {
+    "horizontal": false,
+    "series": true,
+    "singleRow": false,
+    "xKey": "week_end",
+    "valueKeysTallSupport": ["value"],
+    "ignoredKeys": [
+      "suppression_flag",
+      "95_confidence_interval_lower",
+      "95_confidence_interval_upper",
+      "95_confidence_internal_range"
+    ],
+    "seriesKey": "demographic_group"
+  },
+  "version": "4.24.10",
+  "description": "<div class=\"text-left\"><p class=\"fnote\">95% confidence intervals for the point estimates are presented at the data.cdc.gov link below.<br><br> Data last updated on <span data-timestamp=\"NISVaccinationsCumulative7a:Data_as_of\"></span> and presented through <span data-timestamp=\"NISVaccinationsCumulative7a:Data_Presented_Through\"></span>. <a href=\"https://data.cdc.gov/Vaccinations/Weekly-Respiratory-Virus-Vaccination-Data-Children/5c6r-xi2t\">View this dataset</a> on data.CDC.gov.</p></div>",
+  "dynamicMarginTop": 0,
+  "filters": [
+    {
+      "values": ["COVID-19", "Influenza", "RSV"],
+      "filterStyle": "dropdown",
+      "id": 1726688167656,
+      "columnName": "pathogen",
+      "showDropdown": false,
+      "active": "COVID-19"
+    }
+  ],
+  "runtimeDataUrl": "https://wcms-wp.cdc.gov/wcms/vizdata/Respitory_Viruses/NISVaccinationsCumulative7a.json",
+  "showLineSeriesLabels": false,
+  "colorMatchLineSeriesLabels": false
+}

package/src/components/AreaChart/components/AreaChart.Stacked.jsx

@@ -33,7 +33,13 @@ const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver,
     data && (
       <svg height={Number(yMax)}>
         <ErrorBoundary component='AreaChartStacked'>
-          <Group className='area-chart' key='area-wrapper' left={Number(config.yAxis.size) + strokeWidth / 2} height={Number(yMax)} style={{ overflow: 'hidden' }}>
+          <Group
+            className='area-chart'
+            key='area-wrapper'
+            left={Number(config.yAxis.size) + strokeWidth / 2}
+            height={Number(yMax)}
+            style={{ overflow: 'hidden' }}
+          >
             <AreaStack
               data={data}
               keys={config.runtime.areaSeriesKeys.map(s => s.dataKey) || config.series.map(s => s.dataKey)}
@@ -44,8 +50,14 @@ const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver,
             >
               {({ stacks, path }) => {
                 return stacks.map((stack, stackIndex) => {
-                  let transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(stack.key) === -1
-                  let displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(stack.key) !== -1
+                  let transparentArea =
+                    config.legend.behavior === 'highlight' &&
+                    seriesHighlight.length > 0 &&
+                    seriesHighlight.indexOf(stack.key) === -1
+                  let displayArea =
+                    config.legend.behavior === 'highlight' ||
+                    seriesHighlight.length === 0 ||
+                    seriesHighlight.indexOf(stack.key) !== -1
 
                   return (
                     // prettier-ignore

package/src/components/Axis/Categorical.Axis.tsx

@@ -44,7 +44,7 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
     if (categoryObj[lastheight] === '') {
       // Calculate the sum of the numeric values of all other heights
       const sumOfValues = heights.slice(0, -1).reduce((sum, label) => {
-        const value = parseInt(categoryObj[label], 10)
+        const value = Number(categoryObj[label])
         return sum + (isNaN(value) ? 0 : value)
       }, 0)
 
@@ -52,7 +52,7 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
       const newValue = max - sumOfValues
 
       // Update the last height with the new value
-      categoryObj[lastheight] = newValue.toString()
+      categoryObj[lastheight] = newValue
     }
 
     return [categoryObj]

package/src/components/BarChart/components/BarChart.Horizontal.tsx

@@ -22,6 +22,8 @@ import chroma from 'chroma-js'
 // Local context and types
 import BarChartContext, { BarChartContextValues } from './context'
 import { ChartContext } from '../../../types/ChartContext'
+import _ from 'lodash'
+import { getBarData } from '../helpers/getBarData'
 
 export const BarChartHorizontal = () => {
   const { xScale, yScale, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
@@ -35,9 +37,7 @@ export const BarChartHorizontal = () => {
     formatDate,
     parseDate,
     setSharedFilter,
-    isNumber,
-    getYAxisData,
-    getXAxisData
+    isNumber
   } = useContext<ChartContext>(ConfigContext)
   const {
     isHorizontal,
@@ -60,13 +60,21 @@ export const BarChartHorizontal = () => {
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
+  const hasConfidenceInterval = Object.keys(config.confidenceKeys).length > 0
+
+  const _data = getBarData(config, data, hasConfidenceInterval)
+
+  const root = document.documentElement
+
+  const coolGray90 = getComputedStyle(root).getPropertyValue('--cool-gray-90')
+
   return (
     config.visualizationSubType !== 'stacked' &&
     config.visualizationType === 'Bar' &&
     config.orientation === 'horizontal' && (
       <Group>
         <BarGroup
-          data={config.preliminaryData?.some(pd => pd.value && pd.type === 'suppression') ? tableData : data}
+          data={config.preliminaryData?.some(pd => pd.value && pd.type === 'suppression') ? tableData : _data}
           keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys}
           height={yMax}
           x0={d => d[config.runtime.originalXAxis.dataKey]}
@@ -86,6 +94,8 @@ export const BarChartHorizontal = () => {
                 top={barGroup.y}
               >
                 {barGroup.bars.map((bar, index) => {
+                  const datum = _data[barGroup.index]
+                  const dataValue = datum[config.runtime.originalXAxis.dataKey]
                   const scaleVal = config.yAxis.type === 'logarithmic' ? 0.1 : 0
                   let highlightedBarValues = config.highlightedBarValues
                     .map(item => item.value)
@@ -119,9 +129,7 @@ export const BarChartHorizontal = () => {
                   const barX = bar.value < 0 ? Math.abs(xScale(bar.value)) : xScale(scaleVal)
                   const yAxisValue = formatNumber(bar.value, 'left')
                   const xAxisValue =
-                    config.runtime[section].type === 'date'
-                      ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey]))
-                      : data[barGroup.index][config.runtime.originalXAxis.dataKey]
+                    config.runtime[section].type === 'date' ? formatDate(parseDate(dataValue)) : dataValue
 
                   const barPosition = !isPositiveBar ? 'below' : 'above'
                   const absentDataLabel = getAbsentDataLabel(yAxisValue)
@@ -167,7 +175,10 @@ export const BarChartHorizontal = () => {
                     config.runtime.seriesLabels && config.runtime.seriesLabels[bar.key]
                       ? colorScale(config.runtime.seriesLabels[bar.key])
                       : colorScale(bar.key)
-                  barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor) // Color code by category
+                  const hasDynamicCategory = config.series.find(s => s.dynamicCategory)
+                  if (!hasDynamicCategory) {
+                    barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor) // Color code by category
+                  }
                   const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
                   const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
                   const isHighlightedBar = highlightedBarValues?.includes(xAxisValue)
@@ -199,6 +210,16 @@ export const BarChartHorizontal = () => {
                     return barColor
                   }
 
+                  // Confidence Interval Variables
+                  const tickWidth = 5
+                  const yPos = barHeight * bar.index + barHeight / 2
+                  const [upperPos, lowerPos] = ['upper', 'lower'].map(position => {
+                    if (!hasConfidenceInterval) return
+                    const d = datum.dynamicData ? datum.CI[bar.key][position] : datum[config.confidenceKeys[position]]
+                    return xScale(d)
+                  })
+                  // End Confidence Interval Variables
+
                   return (
                     <Group key={`${barGroup.index}--${index}`}>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
@@ -321,10 +342,10 @@ export const BarChartHorizontal = () => {
                             textAnchor={'start'}
                           >
                             {config.runtime.yAxis.type === 'date'
-                              ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey]))
+                              ? formatDate(parseDate(dataValue))
                               : isHorizontal
-                              ? data[barGroup.index][config.runtime.originalXAxis.dataKey]
-                              : formatNumber(data[barGroup.index][config.runtime.originalXAxis.dataKey])}
+                              ? dataValue
+                              : formatNumber(dataValue)}
                           </Text>
                         )}
 
@@ -357,6 +378,20 @@ export const BarChartHorizontal = () => {
                             <animate attributeName='height' values={`0, ${lollipopShapeSize}`} dur='2.5s' />
                           </rect>
                         )}
+                        {hasConfidenceInterval && (
+                          <path
+                            key={`confidence-interval-h-${yPos}-${datum[config.runtime.originalXAxis.dataKey]}`}
+                            stroke={coolGray90}
+                            strokeWidth='px'
+                            d={`
+                                M${lowerPos} ${yPos - tickWidth}
+                                L${lowerPos} ${yPos + tickWidth}
+                                M${lowerPos} ${yPos}
+                                L${upperPos} ${yPos}
+                                M${upperPos} ${yPos - tickWidth}
+                                L${upperPos} ${yPos + tickWidth} `}
+                          />
+                        )}
                       </Group>
                     </Group>
                   )
@@ -365,32 +400,6 @@ export const BarChartHorizontal = () => {
             ))
           }}
         </BarGroup>
-
-        {Object.keys(config.confidenceKeys).length > 0
-          ? data.map(d => {
-              let xPos, yPos
-              let upperPos
-              let lowerPos
-              let tickWidth = 5
-              yPos = yScale(getXAxisData(d)) - 0.75 * config.barHeight
-              upperPos = xScale(getYAxisData(d, config.confidenceKeys.upper))
-              lowerPos = xScale(getYAxisData(d, config.confidenceKeys.lower))
-              return (
-                <path
-                  key={`confidence-interval-h-${yPos}-${d[config.runtime.originalXAxis.dataKey]}`}
-                  stroke='#333'
-                  strokeWidth='px'
-                  d={`
-                    M${lowerPos} ${yPos - tickWidth}
-                    L${lowerPos} ${yPos + tickWidth}
-                    M${lowerPos} ${yPos}
-                    L${upperPos} ${yPos}
-                    M${upperPos} ${yPos - tickWidth}
-                    L${upperPos} ${yPos + tickWidth} `}
-                />
-              )
-            })
-          : ''}
       </Group>
     )
   )

package/src/components/BarChart/components/BarChart.Vertical.tsx

@@ -21,7 +21,8 @@ import createBarElement from '@cdc/core/components/createBarElement'
 import chroma from 'chroma-js'
 // Types
 import { type ChartContext } from '../../../types/ChartContext'
-import _, { has } from 'lodash'
+import _ from 'lodash'
+import { getBarData } from '../helpers/getBarData'
 
 export const BarChartVertical = () => {
   const { xScale, yScale, xMax, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
@@ -44,8 +45,14 @@ export const BarChartVertical = () => {
   } = useBarChart()
 
   // prettier-ignore
-  const { colorScale, config, dashboardConfig, tableData, formatDate, formatNumber, getXAxisData, getYAxisData, parseDate, seriesHighlight, setSharedFilter, transformedData, brushConfig } = useContext<ChartContext>(ConfigContext)
+  const { colorScale, config, dashboardConfig, tableData, formatDate, formatNumber, parseDate, seriesHighlight, setSharedFilter, transformedData, brushConfig } = useContext<ChartContext>(ConfigContext)
+
   const { HighLightedBarUtils } = useHighlightedBars(config)
+
+  const root = document.documentElement
+
+  const coolGray90 = getComputedStyle(root).getPropertyValue('--cool-gray-90')
+
   let data = transformedData
   // check if user add suppression
   const isSuppressionActive = config.preliminaryData.some(pd => pd.value && pd.type === 'suppression')
@@ -60,32 +67,7 @@ export const BarChartVertical = () => {
 
   const hasConfidenceInterval = Object.keys(config.confidenceKeys).length > 0
 
-  const getData = () => {
-    const dynamicSeries = config.series.find(s => s.dynamicCategory)
-    if (!dynamicSeries) return data
-    const { dynamicCategory, dataKey } = dynamicSeries
-    const xAxisKey = config.runtime.originalXAxis.dataKey
-    const xAxisGroupDataLookup = _.groupBy(data, xAxisKey)
-    return Object.values(xAxisGroupDataLookup).map(group => {
-      return group.reduce((acc, datum) => {
-        const dataValue = datum[dataKey]
-        const dataCategory = datum[dynamicCategory]
-        if (hasConfidenceInterval) {
-          const { lower, upper } = config.confidenceKeys
-          if (!acc.CI) acc.CI = {}
-          const lowerValue = datum[lower]
-          const upperValue = datum[upper]
-          acc.CI[dataCategory] = { lower: lowerValue, upper: upperValue }
-        }
-        acc[dataCategory] = dataValue
-        acc[xAxisKey] = datum[xAxisKey]
-        acc.dynamicData = true
-        return acc
-      }, {})
-    })
-  }
-
-  const _data = getData()
+  const _data = getBarData(config, data, hasConfidenceInterval)
   return (
     config.visualizationSubType !== 'stacked' &&
     (config.visualizationType === 'Bar' ||
@@ -109,11 +91,11 @@ export const BarChartVertical = () => {
           }}
         >
           {barGroups => {
-            return barGroups.map((barGroup, index) => (
+            return barGroups.map((barGroup, _index) => (
               <Group
-                className={`bar-group-${barGroup.index}-${barGroup.x0}--${index} ${config.orientation}`}
-                key={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`}
-                id={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`}
+                className={`bar-group-${barGroup.index}-${barGroup.x0}--${_index} ${config.orientation}`}
+                key={`bar-group-${barGroup.index}-${barGroup.x0}--${_index}`}
+                id={`bar-group-${barGroup.index}-${barGroup.x0}--${_index}`}
                 left={barGroup.x0}
               >
                 {barGroup.bars.map((bar, index) => {
@@ -249,11 +231,17 @@ export const BarChartVertical = () => {
                   // Confidence Interval Variables
                   const tickWidth = 5
                   const xPos = barX + (config.xAxis.type !== 'date-time' ? barWidth / 2 : 0)
-                  const [upperPos, lowerPos] = ['upper', 'lower'].map(position => {
-                    if (!hasConfidenceInterval) return
-                    const d = datum.dynamicData ? datum.CI[bar.key][position] : datum[config.confidenceKeys[position]]
-                    return yScale(d)
-                  })
+
+                  const upperPos = yScale(
+                    datum.dynamicData && datum?.CI?.[bar.key]
+                      ? datum.CI[bar.key].upper
+                      : datum[config.confidenceKeys.upper]
+                  )
+                  const lowerPos = yScale(
+                    datum.dynamicData && datum?.CI?.[bar.key]
+                      ? datum.CI[bar.key].lower
+                      : datum[config.confidenceKeys.lower]
+                  )
                   // End Confidence Interval Variables
 
                   return (
@@ -372,7 +360,7 @@ export const BarChartVertical = () => {
                           <rect
                             display={displaylollipopShape}
                             x={barX - lollipopBarWidth / 2}
-                            y={barY}
+                            y={bar.y}
                             width={lollipopShapeSize}
                             height={lollipopShapeSize}
                             fill={getBarBackgroundColor(colorScale(config.runtime.seriesLabels[bar.key]))}
@@ -384,10 +372,10 @@ export const BarChartVertical = () => {
                             <animate attributeName='height' values={`0, ${lollipopShapeSize}`} dur='2.5s' />
                           </rect>
                         )}
-                        {hasConfidenceInterval && (
+                        {hasConfidenceInterval && bar.value !== undefined && datum && (
                           <path
                             key={`confidence-interval-v-${datum[config.runtime.originalXAxis.dataKey]}`}
-                            stroke='#333'
+                            stroke={coolGray90}
                             strokeWidth='px'
                             d={`M${xPos - tickWidth} ${upperPos}
                                 L${xPos + tickWidth} ${upperPos}

package/src/components/BarChart/helpers/getBarData.ts

@@ -0,0 +1,28 @@
+import _ from 'lodash'
+import { TransformedData } from '../../../types/ChartContext'
+import { ChartConfig } from '../../../types/ChartConfig'
+
+export const getBarData = (config: ChartConfig, data: TransformedData[], hasConfidenceInterval: boolean) => {
+  const dynamicSeries = config.series.find(s => s.dynamicCategory)
+  if (!dynamicSeries) return data
+  const { dynamicCategory, dataKey } = dynamicSeries
+  const xAxisKey = config.runtime.originalXAxis.dataKey
+  const xAxisGroupDataLookup = _.groupBy(data, xAxisKey)
+  return Object.values(xAxisGroupDataLookup).map(group => {
+    return group.reduce((acc, datum) => {
+      const dataValue = datum[dataKey]
+      const dataCategory = datum[dynamicCategory]
+      if (hasConfidenceInterval) {
+        const { lower, upper } = config.confidenceKeys
+        if (!acc.CI) acc.CI = {}
+        const lowerValue = datum[lower]
+        const upperValue = datum[upper]
+        acc.CI[dataCategory] = { lower: lowerValue, upper: upperValue }
+      }
+      acc[dataCategory] = dataValue
+      acc[xAxisKey] = datum[xAxisKey]
+      acc.dynamicData = true
+      return acc
+    }, {})
+  })
+}