@cdc/chart 4.24.7 → 4.24.9

package/src/components/PieChart/PieChart.tsx

@@ -33,7 +33,17 @@ type TooltipData = {
 }
 
 const PieChart = props => {
-  const { transformedData: data, config, colorScale, currentViewport, dimensions, highlight, highlightReset, seriesHighlight, isDraggingAnnotation } = useContext(ConfigContext)
+  const {
+    transformedData: data,
+    config,
+    colorScale,
+    currentViewport,
+    dimensions,
+    highlight,
+    highlightReset,
+    seriesHighlight,
+    isDraggingAnnotation
+  } = useContext(ConfigContext)
   const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip<TooltipData>()
   const { handleTooltipMouseOver, handleTooltipMouseOff, TooltipListItem } = useCoveTooltip({
     xScale: false,
@@ -135,7 +145,18 @@ const PieChart = props => {
       <>
         {transitions.map(({ item: arc, props, key }, animatedPieIndex) => {
           return (
-            <Group className={arc.data[config.xAxis.dataKey]} key={`${key}-${animatedPieIndex}`} style={{ opacity: config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(arc.data[config.runtime.xAxis.dataKey]) === -1 ? 0.5 : 1 }}>
+            <Group
+              className={arc.data[config.xAxis.dataKey]}
+              key={`${key}-${animatedPieIndex}`}
+              style={{
+                opacity:
+                  config.legend.behavior === 'highlight' &&
+                  seriesHighlight.length > 0 &&
+                  seriesHighlight.indexOf(arc.data[config.runtime.xAxis.dataKey]) === -1
+                    ? 0.5
+                    : 1
+              }}
+            >
               <animated.path
                 d={interpolate([props.startAngle, props.endAngle], (startAngle, endAngle) =>
                   path({
@@ -163,7 +184,14 @@ const PieChart = props => {
           return (
             <animated.g key={`${key}${i}`}>
               {hasSpaceForLabel && (
-                <Text style={{ fill: textColor }} x={centroidX} y={centroidY} dy='.33em' textAnchor='middle' pointerEvents='none'>
+                <Text
+                  style={{ fill: textColor }}
+                  x={centroidX}
+                  y={centroidY}
+                  dy='.33em'
+                  textAnchor='middle'
+                  pointerEvents='none'
+                >
                   {Math.round((((arc.endAngle - arc.startAngle) * 180) / Math.PI / 360) * 100) + '%'}
                 </Text>
               )}
@@ -174,17 +202,18 @@ const PieChart = props => {
     )
   }
 
-  let [width] = dimensions
+  let chartWidth = props.parentWidth
+  let width = props.parentWidth
 
   if (config && config.legend && !config.legend.hide && currentViewport === 'lg') {
-    width = width * 0.73
+    width = Number(chartWidth) * 0.73
   }
 
   const height = config.heights.vertical
 
   const radius = Math.min(width, height) / 2
   const centerY = height / 2
-  const centerX = width / 2
+  const centerX = props.parentWidth / 2
   const donutThickness = config.pieType === 'Donut' ? 75 : radius
 
   useEffect(() => {
@@ -205,10 +234,24 @@ const PieChart = props => {
 
   const createLegendLabels = createFormatLabels(config, [], _data, _colorScale)
 
+  const getSvgClasses = () => {
+    let classes = ['animated-pie', 'group']
+    if (config.animate === false || animatedPie) {
+      classes.push('animated')
+    }
+    return classes.join(' ')
+  }
+
   return (
     <>
       <ErrorBoundary component='PieChart'>
-        <svg width={radius * 2} height={height} className={`animated-pie group ${config.animate === false || animatedPie ? 'animated' : ''}`} role='img' aria-label={handleChartAriaLabels(config)}>
+        <svg
+          width={radius * 2}
+          height={height}
+          className={getSvgClasses()}
+          role='img'
+          aria-label={handleChartAriaLabels(config)}
+        >
           <Group top={centerY} left={radius}>
             {/* prettier-ignore */}
             <Pie
@@ -223,17 +266,31 @@ const PieChart = props => {
           </Group>
         </svg>
         <div ref={triggerRef} />
-        {!isDraggingAnnotation && tooltipData && Object.entries(tooltipData.data).length > 0 && tooltipOpen && showTooltip && tooltipData.dataYPosition && tooltipData.dataXPosition && (
-          <>
-            <style>{`.tooltip {background-color: rgba(255,255,255, ${config.tooltips.opacity / 100}) !important`}</style>
-            <TooltipWithBounds key={Math.random()} className={'tooltip cdc-open-viz-module'} left={tooltipLeft} top={tooltipTop}>
-              <ul>{typeof tooltipData === 'object' && Object.entries(tooltipData.data).map((item, index) => <TooltipListItem item={item} key={index} />)}</ul>
-            </TooltipWithBounds>
-          </>
-        )}
-        {/* <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' /> */}
+        {!isDraggingAnnotation &&
+          tooltipData &&
+          Object.entries(tooltipData.data).length > 0 &&
+          tooltipOpen &&
+          showTooltip &&
+          tooltipData.dataYPosition &&
+          tooltipData.dataXPosition && (
+            <>
+              <style>{`.tooltip {background-color: rgba(255,255,255, ${
+                config.tooltips.opacity / 100
+              }) !important`}</style>
+              <TooltipWithBounds
+                key={Math.random()}
+                className={'tooltip cdc-open-viz-module'}
+                left={tooltipLeft}
+                top={tooltipTop}
+              >
+                <ul>
+                  {typeof tooltipData === 'object' &&
+                    Object.entries(tooltipData.data).map((item, index) => <TooltipListItem item={item} key={index} />)}
+                </ul>
+              </TooltipWithBounds>
+            </>
+          )}
       </ErrorBoundary>
-      <LegendComponent config={config} colorScale={_colorScale} seriesHighlight={seriesHighlight} highlight={highlight} highlightReset={highlightReset} currentViewport={currentViewport} formatLabels={createLegendLabels} />
     </>
   )
 }

package/src/components/Sankey/index.tsx

@@ -28,17 +28,23 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
 
   //Tooltip
   const [tooltipID, setTooltipID] = useState<string>('')
+  //Mobile Pop Up
+  const [showPopup, setShowPopup] = useState(false)
 
   const handleNodeClick = (nodeId: string) => {
-    setTooltipID(nodeId)
-  }
+    // Store the previous tooltipID
+    const previousTooltipID = tooltipID
 
-  const clearNodeClick = () => {
-    setTooltipID('')
-  }
+    // If the previous tooltipID exists, clear it
+    if (previousTooltipID) {
+      setTooltipID('')
+    }
 
-  //Mobile Pop Up
-  const [showPopup, setShowPopup] = useState(false)
+    // Update the tooltipID with the new nodeId if it's different from the previous one
+    if (previousTooltipID !== nodeId) {
+      setTooltipID(nodeId)
+    }
+  }
 
   useEffect(() => {
     if (window.innerWidth < 768 && window.innerHeight > window.innerWidth) {
@@ -209,7 +215,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
           fillOpacity={opacityValue}
           rx={sankeyConfig.rxValue}
           // todo: move enable tooltips to sankey
-          data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+          data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
           data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
           onClick={() => handleNodeClick(node.id)}
           style={{ pointerEvents: 'visible', cursor: 'pointer' }}
@@ -240,7 +246,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               className='node-text'
               style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
               onClick={() => handleNodeClick(node.id)}
-              data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+              data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
               {(data?.storyNodeText?.find(storyNode => storyNode.StoryNode === node.id) || {}).segmentTextBefore}
@@ -255,7 +261,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               textAnchor='start'
               style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
               onClick={() => handleNodeClick(node.id)}
-              data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+              data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
               {typeof node.value === 'number' ? node.value.toLocaleString() : node.value}
@@ -271,7 +277,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               verticalAnchor='end'
               style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
               onClick={() => handleNodeClick(node.id)}
-              data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+              data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
               {(data?.storyNodeText?.find(storyNode => storyNode.StoryNode === node.id) || {}).segmentTextAfter}
@@ -282,7 +288,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
             <Text
               style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
               onClick={() => handleNodeClick(node.id)}
-              data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+              data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
               x={node.x0! + textPositionHorizontal}
               y={(node.y1! + node.y0!) / 2 + textPositionVertical}
@@ -304,7 +310,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               textAnchor='start'
               style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
               onClick={() => handleNodeClick(node.id)}
-              data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+              data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
               <tspan className={classStyle}>{sankeyConfig.nodeValueStyle.textBefore + (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) + sankeyConfig.nodeValueStyle.textAfter}</tspan>
@@ -339,7 +345,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
         strokeWidth={link.width! + 2}
         style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
         onClick={() => handleNodeClick(link.target.id || null)}
-        data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+        data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
         data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
       />
     )
@@ -376,7 +382,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
           fillOpacity={opacityValue}
           rx={sankeyConfig.rxValue}
           // todo: move enable tooltips to sankey
-          data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+          data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
           data-tooltip-id={`tooltip`}
           onClick={() => handleNodeClick(node.id)}
           style={{ pointerEvents: 'visible', cursor: 'pointer' }}
@@ -467,7 +473,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
 
         {/* ReactTooltip needs to remain even if tooltips are disabled -- it handles when a user clicks off of the node and resets
         the sankey diagram. When tooltips are disabled this will nothing */}
-        <ReactTooltip id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`} afterHide={() => clearNodeClick()} events={['click']} place={'bottom'} style={{ backgroundColor: `rgba(238, 238, 238, 1)`, color: 'black', boxShadow: `0 3px 10px rgb(0 0 0 / 0.2)` }} />
+        <ReactTooltip id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`} afterHide={() => setTooltipID('')} events={['click']} place={'bottom'} style={{ backgroundColor: `rgba(238, 238, 238, 1)`, color: 'black', boxShadow: `0 3px 10px rgb(0 0 0 / 0.2)` }} />
         {showPopup && (
           <div className='popup'>
             <div className='popup-content'>

package/src/components/Sparkline/components/SparkLine.tsx

@@ -107,10 +107,10 @@ const SparkLine: React.FC<SparkLineProps> = props => {
                   opacity={config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
                   display={config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
                 >
-                  {data.map((d, dataIndex) => {
+                  {config.labels && data.map((d, dataIndex) => {
                     return (
                       <Group key={`series-${seriesKey}-point-${dataIndex}`}>
-                        <Text display={config.labels ? 'block' : 'none'} x={xScale(getXAxisData(d))} y={yScale(getYAxisData(d, seriesKey))} fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'} textAnchor='middle'>
+                        <Text x={xScale(getXAxisData(d))} y={yScale(getYAxisData(d, seriesKey))} fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'} textAnchor='middle'>
                           {formatNumber(d[seriesKey])}
                         </Text>
                       </Group>

package/src/data/initial-state.js

@@ -28,7 +28,7 @@ export default {
     showDownloadButton: false,
     showMissingDataLabel: true,
     showSuppressedSymbol: true,
-    showZeroValueDataLabel: true
+    hideNullValue: true
   },
   padding: {
     left: 5,
@@ -61,7 +61,8 @@ export default {
     tickRotation: 0,
     anchors: [],
     shoMissingDataLabel: true,
-    showMissingDataLine: true
+    showMissingDataLine: true,
+    categories: []
   },
   boxplot: {
     plots: [],
@@ -159,11 +160,20 @@ export default {
     dynamicLegendItemLimit: 5,
     dynamicLegendItemLimitMessage: 'Dynamic Legend Item Limit Hit.',
     dynamicLegendChartMessage: 'Select Options from the Legend',
+    label: '',
     lineMode: false,
     verticalSorted: false,
     highlightOnHover: false,
     hideSuppressedLabels: false,
-    seriesHighlight: []
+    hideSuppressionLink: false,
+    seriesHighlight: [],
+    style: 'circles',
+    subStyle: 'linear blocks',
+    tickRotation: '',
+    hideBorder: {
+      side: false,
+      topBottom: true
+    }
   },
   brush: {
     height: 25,

package/src/hooks/useLegendClasses.ts

@@ -1,31 +1,68 @@
-export default function useLegendClasses(config) {
-  let containerClasses = ['legend-container']
-  let innerClasses = ['legend-container__inner']
-
-  // Legend Positioning
-  if (config.legend.position === 'left') {
-    containerClasses.push('left')
+type ConfigType = {
+  legend: {
+    position: 'left' | 'bottom' | 'top' | 'right'
+    singleRow?: boolean
+    reverseLabelOrder?: boolean
+    verticalSorted?: boolean
+    hideBorder: {
+      side?: boolean
+      topBottom?: boolean
+    }
   }
-  if (config.legend.position === 'bottom') {
-    containerClasses.push('bottom')
-    innerClasses.push('bottom')
+}
+
+const useLegendClasses = (config: ConfigType) => {
+  const containerClasses = ['legend-container']
+  const innerClasses = ['legend-container__inner']
+
+  // Handle legend positioning
+  switch (config.legend.position) {
+    case 'left':
+      containerClasses.push('left')
+      break
+    case 'right':
+      containerClasses.push('right')
+      break
+    case 'bottom':
+      containerClasses.push('bottom')
+      innerClasses.push('double-column', 'bottom')
+      break
+    case 'top':
+      containerClasses.push('top')
+      innerClasses.push('double-column', 'top')
+      break
   }
 
-  if (config.legend.position === 'bottom' && config.legend.singleRow) {
+  // Handle single row configuration for 'bottom' and 'top' positions
+  if (['bottom', 'top'].includes(config.legend.position) && config.legend.singleRow) {
     innerClasses.push('single-row')
   }
 
-  // Legend > Item Ordering
+  // Reverse label order
   if (config.legend.reverseLabelOrder) {
-    innerClasses.push('d-flex')
-    innerClasses.push('flex-column-reverse')
+    innerClasses.push('d-flex', 'flex-column-reverse')
   }
-  if (config.legend.position === 'bottom' && config.legend.verticalSorted) {
+
+  // Vertical sorting for 'bottom' and 'top' positions
+  if (['bottom', 'top'].includes(config.legend.position) && config.legend.verticalSorted) {
     innerClasses.push('vertical-sorted')
   }
 
+  // Configure border classes
+  if (
+    config.legend.hideBorder.side &&
+    (['right', 'left'].includes(config.legend.position) || !config.legend.position)
+  ) {
+    containerClasses.push('no-border')
+  }
+
+  if (config.legend.hideBorder.topBottom && ['top', 'bottom'].includes(config.legend.position)) {
+    containerClasses.push('no-border')
+  }
+
   return {
     containerClasses,
     innerClasses
   }
 }
+export default useLegendClasses

package/src/hooks/useMinMax.ts

@@ -38,10 +38,10 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   const { visualizationType, series } = config
   const { max: enteredMaxValue, min: enteredMinValue } = config.runtime.yAxis
   const minRequiredCIPadding = 1.15 // regardless of Editor if CI data, there must be 10% padding added
-
+  const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
   // do validation bafore applying t0 charts
   const isMaxValid = existPositiveValue ? enteredMaxValue >= maxValue : enteredMaxValue >= 0
-  const isMinValid = config.useLogScale ? enteredMinValue >= 0 : (enteredMinValue <= 0 && minValue >= 0) || (enteredMinValue <= minValue && minValue < 0)
+  const isMinValid = isLogarithmicAxis ? enteredMinValue >= 0 : (enteredMinValue <= 0 && minValue >= 0) || (enteredMinValue <= minValue && minValue < 0)
 
   min = enteredMinValue && isMinValid ? enteredMinValue : minValue
   max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
@@ -143,7 +143,7 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
       min = 0
     }
     if (enteredMinValue) {
-      const isMinValid = config.useLogScale ? enteredMinValue >= 0 && enteredMinValue < minValue : enteredMinValue < minValue
+      const isMinValid = isLogarithmicAxis ? enteredMinValue >= 0 && enteredMinValue < minValue : enteredMinValue < minValue
       min = enteredMinValue && isMinValid ? enteredMinValue : minValue
     }
   }
@@ -154,7 +154,7 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   }
 
   if (config.visualizationType === 'Line' && !checkLineToBarGraph()) {
-    const isMinValid = config.useLogScale ? enteredMinValue >= 0 && enteredMinValue < minValue : enteredMinValue < minValue
+    const isMinValid = isLogarithmicAxis ? enteredMinValue >= 0 && enteredMinValue < minValue : enteredMinValue < minValue
     // update minValue for (0) Suppression points
     const suppressedMinValue = tableData?.some((dataItem, index) => {
       return config.preliminaryData?.some(pd => {

package/src/hooks/useScales.ts

@@ -3,7 +3,7 @@ import { useContext } from 'react'
 import ConfigContext from '../ConfigContext'
 import { ChartConfig } from '../types/ChartConfig'
 import { ChartContext } from '../types/ChartContext'
-
+import * as d3 from 'd3'
 const scaleTypes = {
   TIME: 'time',
   LOG: 'log',
@@ -27,12 +27,10 @@ const useScales = (properties: useScaleProps) => {
 
   const { rawData, dimensions } = useContext<ChartContext>(ConfigContext)
 
-  const [screenWidth, screenHeight] = dimensions
+  const [screenWidth] = dimensions
   const seriesDomain = config.runtime.barSeriesKeys || config.runtime.seriesKeys
   const xAxisType = config.runtime.xAxis.type
   const isHorizontal = config.orientation === 'horizontal'
-  const getXAxisDataKeys = d => d[config.runtime.originalXAxis.dataKey]
-  const xAxisDataKeysMapped = data.map(d => getXAxisDataKeys(d))
 
   const { visualizationType } = config
 
@@ -43,7 +41,6 @@ const useScales = (properties: useScaleProps) => {
   let g1xScale = null
   let seriesScale = null
   let xScaleNoPadding = null
-  let xScaleBrush = null
   let xScaleAnnotation = scaleLinear({
     domain: [0, 100],
     range: [0, xMax]
@@ -52,7 +49,7 @@ const useScales = (properties: useScaleProps) => {
   // handle  Horizontal bars
   if (isHorizontal) {
     xScale = composeXScale({ min: min * 1.03, ...properties })
-    xScale.type = config.useLogScale ? scaleTypes.LOG : scaleTypes.LINEAR
+    xScale.type = config.yAxis.type === 'logarithmic' ? scaleTypes.LOG : scaleTypes.LINEAR
     yScale = getYScaleFunction(xAxisType, xAxisDataMapped)
     yScale.rangeRound([0, yMax])
     seriesScale = composeScalePoint(seriesDomain, [0, yMax])
@@ -60,7 +57,6 @@ const useScales = (properties: useScaleProps) => {
 
   // handle  Vertical bars
   if (!isHorizontal) {
-    xScaleBrush = composeScalePoint(xAxisDataKeysMapped, [0, xMax], 0.5)
     xScale = composeScaleBand(xAxisDataMapped, [0, xMax], 1 - config.barThickness)
     yScale = composeYScale(properties)
     seriesScale = composeScaleBand(seriesDomain, [0, xScale.bandwidth()], 0)
@@ -73,8 +69,8 @@ const useScales = (properties: useScaleProps) => {
   }
 
   if (config.xAxis.type === 'date-time') {
-    let xAxisMin = Math.min(...xAxisDataMapped)
-    let xAxisMax = Math.max(...xAxisDataMapped)
+    let xAxisMin = Math.min(...xAxisDataMapped.map(Number))
+    let xAxisMax = Math.max(...xAxisDataMapped.map(Number))
     xAxisMin -= (config.xAxis.padding ? config.xAxis.padding * 0.01 : 0) * (xAxisMax - xAxisMin)
     xAxisMax += (config.xAxis.padding ? config.xAxis.padding * 0.01 : 0) * (xAxisMax - xAxisMin)
     xScale = scaleTime({
@@ -129,7 +125,9 @@ const useScales = (properties: useScaleProps) => {
   // handle Box plot
   if (visualizationType === 'Box Plot') {
     const allOutliers = []
-    const hasOutliers = config.boxplot.plots.map(b => b.columnOutliers.map(outlier => allOutliers.push(outlier))) && !config.boxplot.hideOutliers
+    const hasOutliers =
+      config.boxplot.plots.map(b => b.columnOutliers.map(outlier => allOutliers.push(outlier))) &&
+      !config.boxplot.hideOutliers
 
     // check if outliers are lower
     if (hasOutliers) {
@@ -215,8 +213,11 @@ const useScales = (properties: useScaleProps) => {
     if (screenWidth > 480) {
       if (config.forestPlot.type === 'Linear') {
         xScale = scaleLinear({
-          domain: [Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower]))) - xAxisPadding, Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper]))) + xAxisPadding],
-          range: [leftWidthOffset, dimensions[0] - rightWidthOffset]
+          domain: [
+            Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower]))) - xAxisPadding,
+            Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper]))) + xAxisPadding
+          ],
+          range: [leftWidthOffset, Number(screenWidth) - rightWidthOffset]
         })
         xScale.type = scaleTypes.LINEAR
       }
@@ -234,7 +235,10 @@ const useScales = (properties: useScaleProps) => {
     } else {
       if (config.forestPlot.type === 'Linear') {
         xScale = scaleLinear({
-          domain: [Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower]))) - xAxisPadding, Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper]))) + xAxisPadding],
+          domain: [
+            Math.min(...data.map(d => parseFloat(d[config.forestPlot.lower]))) - xAxisPadding,
+            Math.max(...data.map(d => parseFloat(d[config.forestPlot.upper]))) + xAxisPadding
+          ],
           range: [leftWidthOffsetMobile, xMax - rightWidthOffsetMobile],
           type: scaleTypes.LINEAR
         })
@@ -255,7 +259,7 @@ const useScales = (properties: useScaleProps) => {
       }
     }
   }
-  return { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding, xScaleBrush, xScaleAnnotation }
+  return { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding, xScaleAnnotation }
 }
 
 export default useScales
@@ -295,31 +299,37 @@ export const getTickValues = (xAxisDataMapped, xScale, num) => {
 /// helper functions
 const composeXScale = ({ min, max, xMax, config }) => {
   // Adjust min value if using logarithmic scale
-  min = config.useLogScale && min >= 0 && min < 1 ? min + 0.1 : min
+  const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
+  min = isLogarithmicAxis && min >= 0 && min < 1 ? min + 0.1 : min
   // Select the appropriate scale function
-  const scaleFunc = config.useLogScale ? scaleLog : scaleLinear
+  const scaleFunc = isLogarithmicAxis ? scaleLog : scaleLinear
   // Return the configured scale function
   return scaleFunc({
     domain: [min, max],
     range: [0, xMax],
-    nice: config.useLogScale,
-    zero: config.useLogScale
+    nice: isLogarithmicAxis,
+    zero: isLogarithmicAxis
   })
 }
 
 const composeYScale = ({ min, max, yMax, config, leftMax }) => {
   // Adjust min value if using logarithmic scale
-  min = config.useLogScale && min >= 0 && min < 1 ? min + 0.1 : min
+  const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
+  min = isLogarithmicAxis && min >= 0 && min < 1 ? min + 0.1 : min
   // Select the appropriate scale function
-  const scaleFunc = config.useLogScale ? scaleLog : scaleLinear
+  const scaleFunc = isLogarithmicAxis ? scaleLog : scaleLinear
 
   if (config.visualizationType === 'Combo') max = leftMax
+
+  // If the visualization type is a bump chart then the domain and range need different values
+  const domainSet = config.visualizationType === 'Bump Chart' ? [1, max] : [min, max]
+  const yRange = config.visualizationType === 'Bump Chart' ? [30, yMax] : [yMax, 0]
   // Return the configured scale function
   return scaleFunc({
-    domain: [min, max],
-    range: [yMax, 0],
-    nice: config.useLogScale,
-    zero: config.useLogScale
+    domain: domainSet,
+    range: yRange,
+    nice: isLogarithmicAxis,
+    zero: isLogarithmicAxis
   })
 }