@cdc/chart 4.26.3 → 4.26.4

package/src/_stories/ChartLine.DashedDates.smoke.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Chart from '../CdcChartComponent'
+import config from './_mock/line_chart_dashed_dates.json'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Special Lines - Dashed on Date Axis',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const DashedSpecialLineWithDates: Story = {
+  args: {
+    config: config,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+  }
+}
+
+export default meta

package/src/_stories/_mock/line_chart_dashed_dates.json

@@ -0,0 +1,276 @@
+{
+  "type": "chart",
+  "title": "Special Lines - Dashed Effect on Date Axis",
+  "theme": "theme-blue",
+  "animate": false,
+  "fontSize": "medium",
+  "lineDatapointStyle": "hover",
+  "lineDatapointColor": "Same as Line",
+  "visualizationSubType": "regular",
+  "visualizationType": "Line",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "barStyle": "flat",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "isResponsiveTicks": false,
+  "general": {
+    "annotationDropdownText": "Annotations",
+    "showDownloadButton": false,
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "showZeroValueData": true,
+    "hideNullValue": true
+  },
+  "padding": { "left": 5, "right": 5 },
+  "preliminaryData": [
+    {
+      "type": "effect",
+      "seriesKeys": ["Value"],
+      "label": "Preliminary",
+      "column": "Status",
+      "value": "preliminary",
+      "style": "Dashed Small",
+      "displayTooltip": true,
+      "displayLegend": true,
+      "displayTable": true,
+      "symbol": "",
+      "iconCode": "",
+      "lineCode": "- - -",
+      "hideBarSymbol": false,
+      "hideLineStyle": false,
+      "circleSize": 6,
+      "displayGray": false
+    }
+  ],
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 50,
+    "gridLines": true,
+    "enablePadding": false,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "rightHideAxis": true,
+    "rightAxisSize": 0,
+    "rightLabel": "",
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "numTicks": "",
+    "axisPadding": 0,
+    "scalePadding": 10,
+    "tickRotation": 0,
+    "anchors": [],
+    "shoMissingDataLabel": true,
+    "showMissingDataLine": true,
+    "categories": [],
+    "label": "Count"
+  },
+  "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",
+      "outliers": "Outliers",
+      "values": "Values",
+      "lowerBounds": "Lower Bounds",
+      "upperBounds": "Upper Bounds"
+    }
+  },
+  "topAxis": { "hasLine": false },
+  "isLegendValue": false,
+  "barThickness": 0.35,
+  "barHeight": 25,
+  "barSpace": 15,
+  "heights": { "vertical": 300, "horizontal": 750 },
+  "xAxis": {
+    "sortDates": false,
+    "anchors": [],
+    "type": "date",
+    "showTargetLabel": false,
+    "targetLabel": "Target",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 75,
+    "tickRotation": 0,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 0,
+    "axisPadding": 0,
+    "target": 0,
+    "maxTickRotation": 0,
+    "padding": 6,
+    "showYearsOnce": false,
+    "dataKey": "date",
+    "label": "",
+    "dateParseFormat": "%Y-%m-%d",
+    "dateDisplayFormat": "%b %Y"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showDownloadLinkBelow": true,
+    "indexLabel": "",
+    "download": false,
+    "showVertical": true,
+    "dateDisplayFormat": "",
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "show": true
+  },
+  "orientation": "vertical",
+  "color": "pinkpurple",
+  "columns": {},
+  "legend": {
+    "hide": false,
+    "behavior": "highlight",
+    "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 }
+  },
+  "brush": { "height": 25, "active": false },
+  "exclusions": { "active": false, "keys": [] },
+  "palette": "qualitative-bold",
+  "isPaletteReversed": false,
+  "twoColor": { "palette": "monochrome-1", "isPaletteReversed": false },
+  "labels": false,
+  "dataFormat": {
+    "commas": false,
+    "prefix": "",
+    "suffix": "",
+    "abbreviated": false,
+    "bottomSuffix": "",
+    "bottomPrefix": "",
+    "bottomAbbreviated": false
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true,
+    "verticalHoverLine": true,
+    "horizontalHoverLine": false
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "highlightedBarValues": [],
+  "series": [
+    {
+      "dataKey": "Value",
+      "type": "Line",
+      "lineType": "curveLinear",
+      "axis": "Left",
+      "tooltip": true
+    }
+  ],
+  "tooltips": { "opacity": 90, "singleSeries": false, "dateDisplayFormat": "" },
+  "annotations": [],
+  "debugSvg": false,
+  "chartMessage": { "noData": "No Data Available" },
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "isResponsiveTicks": false,
+  "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": []
+  },
+  "version": "4.25.1",
+  "dynamicMarginTop": 0,
+  "data": [
+    { "date": "2024-07-01", "Value": "42", "Status": "final" },
+    { "date": "2024-08-01", "Value": "55", "Status": "final" },
+    { "date": "2024-09-01", "Value": "61", "Status": "final" },
+    { "date": "2024-10-01", "Value": "48", "Status": "final" },
+    { "date": "2024-11-01", "Value": "53", "Status": "final" },
+    { "date": "2024-12-01", "Value": "67", "Status": "final" },
+    { "date": "2025-01-01", "Value": "72", "Status": "preliminary" },
+    { "date": "2025-02-01", "Value": "78", "Status": "preliminary" },
+    { "date": "2025-03-01", "Value": "85", "Status": "preliminary" }
+  ]
+}

package/src/_stories/_mock/paired-bar-abbr.json

@@ -366,7 +366,7 @@
       "Female": "500"
     }
   ],
-  "dataFileName": "paired-bar-formatted.json",
+  "dataFileName": "/examples/feature/paired-bar/__data__/paired-bar-formatted.json",
   "dataFileSourceType": "file",
   "formattedData": [
     {

package/src/_stories/_mock/paired-bar.json

@@ -246,7 +246,7 @@
     { "Age Group": "45-54", "Male": "8259", "Female": "5633" },
     { "Age Group": "55-64", "Male": "1235", "Female": "810" }
   ],
-  "dataFileName": "paired-bar-formatted.json",
+  "dataFileName": "/examples/feature/paired-bar/__data__/paired-bar-formatted.json",
   "dataFileSourceType": "file",
   "formattedData": [
     { "Age Group": "65", "Male": "730", "Female": "402" },

package/src/components/Annotations/components/AnnotationDraggable.tsx

@@ -218,7 +218,7 @@ const Annotations = ({
               return (
                 <HtmlLabel
                   className='annotation__desktop-label'
-                  containerStyle={{ width: `${labelWidth}px` }}
+                  containerStyle={{ width: 'fit-content', maxWidth: `${labelWidth}px` }}
                   horizontalAnchor={horizontalAnchor}
                   verticalAnchor={verticalAnchor}
                   showAnchorLine={false}

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

@@ -11,7 +11,15 @@ import { Bar, AreaStack } from '@visx/shape'
 import { Group } from '@visx/group'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 
-const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff }) => {
+const AreaChartStacked = ({
+  xScale,
+  yScale,
+  yMax,
+  xMax,
+  yAxisWidth,
+  handleTooltipMouseOver,
+  handleTooltipMouseOff
+}) => {
   // import data from context
   let { transformedData: data, config, seriesHighlight, colorScale, rawData, parseDate } = useContext(ConfigContext)
   // Draw transparent bars over the chart to get tooltip data
@@ -39,7 +47,7 @@ const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver,
           <Group
             className='area-chart'
             key='area-wrapper'
-            left={Number(config.yAxis.size) + strokeWidth / 2}
+            left={yAxisWidth + strokeWidth / 2}
             height={Number(yMax)}
             style={{ overflow: 'hidden' }}
           >

package/src/components/Axis/BottomAxis.tsx

@@ -205,7 +205,7 @@ const BottomAxis: React.FC<BottomAxisProps> = ({
               const tickLength = showTick === 'block' ? MAJOR_TICK_LENGTH : DEFAULT_TICK_LENGTH
               const to = { x: tick.to.x, y: tickLength }
               const tickSlotWidth = filteredTicks.length > 0 ? xMax / filteredTicks.length : xMax
-              const limitedWidth = Math.max(Math.min(maxLengthOfTick, tickSlotWidth), 0)
+              const limitedWidth = Math.max(Math.min(maxLengthOfTick, tickSlotWidth), 1)
 
               // Configure rotation using effective values (computed above without mutations)
               const tickRotation =

package/src/components/Axis/LeftAxis.tsx

@@ -36,7 +36,6 @@ interface LeftAxisProps {
   suffixWidth?: number
   horizontalYAxisLabelSpace?: number
   categoryLabelSpace?: number
-  yLabelOffset?: number
 }
 
 const LeftAxis: React.FC<LeftAxisProps> = ({
@@ -53,8 +52,7 @@ const LeftAxis: React.FC<LeftAxisProps> = ({
   suffixRef,
   suffixWidth = 0,
   horizontalYAxisLabelSpace = 0,
-  categoryLabelSpace = 0,
-  yLabelOffset = 0
+  categoryLabelSpace = 0
 }) => {
   const { config, colorScale, seriesHighlight } = useContext(ConfigContext)
   const { runtime, orientation, visualizationType, visualizationSubType, heights } = config
@@ -387,7 +385,7 @@ const LeftAxis: React.FC<LeftAxisProps> = ({
               className='y-label'
               textAnchor='middle'
               verticalAnchor='start'
-              transform={`translate(${-1 * yAxisWidth + yLabelOffset}, ${axisCenter}) rotate(-90)`}
+              transform={`translate(${-1 * yAxisWidth}, ${axisCenter}) rotate(-90)`}
               fontWeight='bold'
               fill={config.yAxis.labelColor}
               fontSize={axisLabelFontSize}

package/src/components/Axis/LeftAxisGridlines.tsx

@@ -10,7 +10,6 @@ interface LeftAxisGridlinesProps {
   xMax: number
   yAxisWidth: number
   numTicks: number
-  yLabelOffset: number
   axisLabelFontSize: number
 }
 
@@ -19,7 +18,6 @@ const LeftAxisGridlines: React.FC<LeftAxisGridlinesProps> = ({
   xMax,
   yAxisWidth,
   numTicks,
-  yLabelOffset,
   axisLabelFontSize
 }) => {
   const { config } = useContext(ConfigContext)
@@ -60,7 +58,7 @@ const LeftAxisGridlines: React.FC<LeftAxisGridlinesProps> = ({
               className='y-label'
               textAnchor='middle'
               verticalAnchor='start'
-              transform={`translate(${-1 * yAxisWidth + yLabelOffset}, ${axisCenter}) rotate(-90)`}
+              transform={`translate(${-1 * yAxisWidth}, ${axisCenter}) rotate(-90)`}
               fontWeight='bold'
               fill={config.yAxis.labelColor}
               fontSize={axisLabelFontSize}

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

@@ -26,6 +26,7 @@ import { getBarData } from '../helpers/getBarData'
 import { getHorizontalBarHeights } from '../helpers/getBarHeights'
 import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
 import { getChartPatternId } from '../../../helpers/getChartPatternId'
+import { buildSeriesTooltipListHtml } from '../../../helpers/tooltipHelpers'
 
 const BarChartHorizontal = () => {
   const { xScale, yScale, yMax, seriesScale, barChart } = useContext<BarChartContextValues>(BarChartContext)
@@ -243,11 +244,14 @@ const BarChartHorizontal = () => {
                     : xAxisValue
                   const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
-                  const tooltip = `<ul>
-                  <li class="tooltip-heading"">${yAxisTooltip}</li>
-                  <li class="tooltip-body ">${tooltipBody}</li>
-                  <li class="tooltip-body ">${additionalColTooltip}</li>
-                    </li></ul>`
+                  const tooltip = buildSeriesTooltipListHtml({
+                    config,
+                    colorScale,
+                    heading: yAxisTooltip,
+                    seriesKey: bar.key,
+                    seriesText: tooltipBody,
+                    extraRows: additionalColTooltip ? [additionalColTooltip] : []
+                  })
 
                   // configure colors
                   let labelColor = APP_FONT_COLOR

package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx

@@ -16,6 +16,7 @@ import createBarElement from '@cdc/core/components/createBarElement'
 import { getHorizontalBarHeights } from '../helpers/getBarHeights'
 import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
 import { getChartPatternId } from '../../../helpers/getChartPatternId'
+import { buildSeriesTooltipListHtml } from '../../../helpers/tooltipHelpers'
 
 const BarChartStackedHorizontal = () => {
   const { yMax, yScale, xScale, barChart } = useContext<BarChartContextValues>(BarChartContext)
@@ -161,11 +162,14 @@ const BarChartStackedHorizontal = () => {
                 const textWidth = getTextWidth(xAxisValue, `normal ${labelFontSize}px sans-serif`)
                 const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
-                const tooltip = `<ul>
-                  <li class="tooltip-heading"">${yAxisTooltip}</li>
-                  <li class="tooltip-body ">${tooltipBody}</li>
-                  <li class="tooltip-body ">${additionalColTooltip}</li>
-                    </li></ul>`
+                const tooltip = buildSeriesTooltipListHtml({
+                  config,
+                  colorScale,
+                  heading: yAxisTooltip,
+                  seriesKey: bar.key,
+                  seriesText: tooltipBody,
+                  extraRows: additionalColTooltip ? [additionalColTooltip] : []
+                })
 
                 // Check if this bar should use a pattern
                 const patternUrl = getPatternUrlForBar({

package/src/components/BarChart/components/BarChart.StackedVertical.tsx

@@ -10,6 +10,7 @@ import { addMinimumBarHeights } from '../helpers'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
 import { getChartPatternId } from '../../../helpers/getChartPatternId'
+import { buildSeriesTooltipListHtml } from '../../../helpers/tooltipHelpers'
 
 const BarChartStackedVertical = () => {
   const [barWidth, setBarWidth] = useState(0)
@@ -143,11 +144,14 @@ const BarChartStackedVertical = () => {
                     : xAxisValue
                   const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
-                  const tooltip = `<ul>
-                  <li class="tooltip-heading"">${xAxisTooltip}</li>
-                  <li class="tooltip-body ">${tooltipBody}</li>
-                  <li class="tooltip-body ">${additionalColTooltip}</li>
-                    </li></ul>`
+                  const tooltip = buildSeriesTooltipListHtml({
+                    config,
+                    colorScale,
+                    heading: xAxisTooltip,
+                    seriesKey: bar.key,
+                    seriesText: tooltipBody,
+                    extraRows: additionalColTooltip ? [additionalColTooltip] : []
+                  })
 
                   setBarWidth(barThickness)
 

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

@@ -23,6 +23,7 @@ import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 import { getPatternUrl as getPatternUrlForBar } from '../helpers/getPatternUrl'
 import { getChartPatternId } from '../../../helpers/getChartPatternId'
+import { buildSeriesTooltipListHtml } from '../../../helpers/tooltipHelpers'
 
 const BarChartVertical = () => {
   const { xScale, yScale, xMax, yMax, seriesScale, convertLineToBarGraph, barChart } =
@@ -229,12 +230,14 @@ const BarChartVertical = () => {
                     ? `${config.runtime.xAxis.label}: ${xAxisValue}`
                     : xAxisValue
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
-
-                  const tooltip = `<ul>
-                  <li class="tooltip-heading">${xAxisTooltip}</li>
-                  <li class="tooltip-body ">${tooltipBody}</li>
-                  ${additionalColTooltip ? '<li class="tooltip-body ">' + additionalColTooltip + '</li>' : ''}
-                    </li></ul>`
+                  const tooltip = buildSeriesTooltipListHtml({
+                    config,
+                    colorScale,
+                    heading: xAxisTooltip,
+                    seriesKey: bar.key,
+                    seriesText: tooltipBody,
+                    extraRows: additionalColTooltip ? [additionalColTooltip] : []
+                  })
                   const { barHeight, isSuppressed, getBarY, absentDataLabel } = getBarConfig({
                     bar,
                     defaultBarHeight,

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

@@ -18,7 +18,7 @@ type BarChartProps = {
   seriesScale: PositionScale
   xMax: number
   yMax: number
-  yAxisWidth?: number
+  yAxisWidth: number
   handleTooltipMouseOver: MouseEventHandler<SVGRectElement>
   handleTooltipMouseOff: MouseEventHandler<SVGRectElement>
   handleTooltipClick: MouseEventHandler<SVGRectElement>
@@ -49,14 +49,10 @@ const BarChart: React.FC<BarChartProps> = ({
     barChart
   }
 
-  // Use yAxisWidth prop if provided (for horizontal bar charts with dynamic labels)
-  // otherwise fall back to config value
-  const leftOffset = yAxisWidth ?? parseFloat(config.runtime.yAxis.size)
-
   return (
     <ErrorBoundary component='BarChart'>
       <BarChartContext.Provider value={contextValues}>
-        <Group left={leftOffset}>
+        <Group left={yAxisWidth}>
           <BarChartType.StackedVertical />
           <BarChartType.StackedHorizontal />
           <BarChartType.Vertical />

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

@@ -193,7 +193,7 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
       const formattedValue = formatColNumber(
         closestVal[config.columns[colKeys].name],
         'left',
-        true,
+        false,
         config,
         formattingParams
       )

package/src/components/BoxPlot/BoxPlot.Vertical.tsx

@@ -9,7 +9,7 @@ import { handleTooltip, createPlots } from './helpers/index'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import _ from 'lodash'
 
-const BoxPlotVertical = ({ xScale, yScale, seriesScale }) => {
+const BoxPlotVertical = ({ xScale, yScale, seriesScale, yAxisWidth }) => {
   const { config, colorScale, seriesHighlight, transformedData: data } = useContext(ConfigContext)
   const { boxplot } = config
 
@@ -23,7 +23,7 @@ const BoxPlotVertical = ({ xScale, yScale, seriesScale }) => {
   const plots = createPlots(data, config)
   return (
     <ErrorBoundary component='BoxPlot Vertical'>
-      <Group left={Number(config.yAxis.size)} className='boxplot' key={`boxplot-group`}>
+      <Group left={yAxisWidth} className='boxplot' key={`boxplot-group`}>
         {plots.map((d, i) => {
           const offset = boxWidth - constrainedWidth
           const radius = 4
@@ -63,7 +63,7 @@ const BoxPlotVertical = ({ xScale, yScale, seriesScale }) => {
                     {displayPlot && (
                       <BoxPlot
                         display={displayPlot ? 'block' : 'none'}
-                        data-left={xScale(d.columnCategory) + config.yAxis.size + offset / 2 + 0.5}
+                        data-left={xScale(d.columnCategory) + yAxisWidth + offset / 2 + 0.5}
                         key={`box-plot-${i}-${item}`}
                         min={Number(d.min[item.dataKey])}
                         max={Number(d.max[item.dataKey])}