@cdc/chart 4.25.3 → 4.25.5-1

package/src/components/PieChart/PieChart.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState, useEffect, useRef, useMemo } from 'react'
-import { animated, useTransition, interpolate } from 'react-spring'
+import { animated, useTransition, to } from '@react-spring/web'
 
 // visx
 import { Pie } from '@visx/shape'
@@ -14,16 +14,9 @@ import { useTooltip as useCoveTooltip } from '../../hooks/useTooltip'
 import useIntersectionObserver from '../../hooks/useIntersectionObserver'
 import { handleChartAriaLabels } from '../../helpers/handleChartAriaLabels'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import LegendComponent from '../Legend/Legend.Component'
-import { createFormatLabels } from '../Legend/helpers/createFormatLabels'
 import { scaleOrdinal } from '@visx/scale'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
-const enterUpdateTransition = ({ startAngle, endAngle }) => ({
-  startAngle,
-  endAngle
-})
-
 type TooltipData = {
   data: {
     [key: string]: string | number
@@ -117,92 +110,71 @@ const PieChart = props => {
     }
   }, [dataRef?.isIntersecting, config.animate]) // eslint-disable-line
 
-  const AnimatedPie = ({ arcs, path, getKey }) => {
-    const transitions = useTransition(arcs, getKey, {
-      from: enterUpdateTransition,
-      enter: enterUpdateTransition,
-      update: enterUpdateTransition,
-      leave: enterUpdateTransition
+  function AnimatedPie({ arcs, path, getKey, colorScale, onHover, onLeave }) {
+    const enterExit = ({ startAngle, endAngle }) => ({ startAngle, endAngle })
+    const transitions = useTransition(arcs, {
+      keys: getKey,
+      from: enterExit,
+      enter: enterExit,
+      update: enterExit,
+      leave: enterExit
     })
 
-    // DEV-5053
-    // onMouseLeave function doesn't work on animated.path for some reason.
-    // As a workaround, we continue to fire the tooltipData while hovered,
-    // and use this useEffect to hide the tooltip so it doesn't persist when users scroll.
-    useEffect(() => {
-      const timeout = setTimeout(() => {
-        hideTooltip()
-      }, 500)
-      return () => {
-        clearTimeout(timeout)
-      }
-    }, [tooltipData])
-
-    return (
-      <>
-        {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
-              }}
-            >
-              <animated.path
-                d={interpolate([props.startAngle, props.endAngle], (startAngle, endAngle) =>
-                  path({
-                    ...arc,
-                    startAngle,
-                    endAngle
-                  })
-                )}
-                fill={_colorScale(arc.data[config.runtime.xAxis.dataKey])}
-                onMouseEnter={e => handleTooltipMouseOver(e, { data: arc.data[config.runtime.xAxis.dataKey], arc })}
-                onMouseLeave={e => handleTooltipMouseOff()}
-              />
-            </Group>
-          )
-        })}
-        {transitions.map(({ item: arc, key }, i) => {
-          const roundTo = Number(config.dataFormat.roundTo) || 0
-          const [centroidX, centroidY] = path.centroid(arc)
-          const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1
+    return transitions((styles, arc) => {
+      const key = getKey(arc)
+      let textColor = '#FFF'
 
-          let textColor = '#FFF'
-          if (_colorScale(arc.data[config.runtime.xAxis.dataKey])) {
-            textColor = getContrastColor(textColor, _colorScale(arc.data[config.runtime.xAxis.dataKey]))
-          }
-          const degrees = ((arc.endAngle - arc.startAngle) * 180) / Math.PI
+      if (key && _colorScale(key)) {
+        textColor = getContrastColor(textColor, _colorScale(arc.data[config.runtime.xAxis.dataKey]))
+      }
+      const roundTo = Number(config.dataFormat.roundTo) || 0
+      // Calculate the percentage of the full circle (360 degrees)
+      const degrees = ((arc.endAngle - arc.startAngle) * 180) / Math.PI
 
-          // Calculate the percentage of the full circle (360 degrees)
-          const percentageOfCircle = (degrees / 360) * 100
-          const roundedPercentage = percentageOfCircle.toFixed(roundTo)
+      const percentageOfCircle = (degrees / 360) * 100
+      const roundedPercentage = percentageOfCircle.toFixed(roundTo) + '%'
+      return (
+        <Group key={key} className={`slice-${key}`}>
+          {/* ── the slice */}
+          <animated.path
+            d={to([styles.startAngle, styles.endAngle], (start, end) =>
+              path({ ...arc, startAngle: start, endAngle: end })
+            )}
+            fill={colorScale(key)}
+            onMouseEnter={e =>
+              onHover(e, {
+                data: arc.data,
+                dataXPosition: e.clientX,
+                dataYPosition: e.clientY,
+                startAngle: arc.startAngle,
+                endAngle: arc.endAngle
+              })
+            }
+            onMouseLeave={onLeave}
+          />
 
-          return (
-            <animated.g key={`${key}${i}`}>
-              {hasSpaceForLabel && (
-                <Text
-                  style={{ fill: textColor }}
-                  x={centroidX}
-                  y={centroidY}
-                  dy='.33em'
-                  textAnchor='middle'
-                  pointerEvents='none'
-                >
-                  {roundedPercentage + '%'}
-                </Text>
-              )}
-            </animated.g>
-          )
-        })}
-      </>
-    )
+          {/* ── the percentage label */}
+          {arc.endAngle - arc.startAngle > 0.1 && (
+            <animated.text
+              transform={to([styles.startAngle, styles.endAngle], (start, end) => {
+                const [x, y] = path.centroid({
+                  ...arc,
+                  startAngle: start,
+                  endAngle: end
+                })
+                return `translate(${x},${y})`
+              })}
+              textAnchor='middle'
+              pointerEvents='none'
+              fill={textColor}
+            >
+              {/** compute text inside the spring callback */}
+              {roundedPercentage}
+            </animated.text>
+          )}
+        </Group>
+      )
+    })
   }
 
   let chartWidth = props.parentWidth
@@ -257,12 +229,20 @@ const PieChart = props => {
             {/* prettier-ignore */}
             <Pie
             data={filteredData || _data}
-            pieValue={d => d[pivotKey || config.runtime.yAxis.dataKey]}
+            pieValue={d => parseFloat(d[pivotKey || config.runtime.yAxis.dataKey])}
             pieSortValues={() => -1}
             innerRadius={radius - donutThickness}
             outerRadius={radius}
           >
-            {pie => <AnimatedPie {...pie} getKey={d => d.data[config.runtime.xAxis.dataKey]}/>}
+           {pie => (
+             <AnimatedPie
+             {...pie}
+              getKey={d => d.data[config.runtime.xAxis.dataKey]}
+                colorScale={_colorScale}
+              onHover={handleTooltipMouseOver}
+               onLeave={handleTooltipMouseOff}
+           />
+            )}
           </Pie>
           </Group>
         </svg>

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -59,6 +59,11 @@ const ScatterPlot = ({ xScale, yScale }) => {
             opacity: 1,
             stroke: displayArea ? 'black' : ''
           }
+          if (item[s]==='') {
+            return <> </>
+          }
+
+
 
           return (
             <circle

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

@@ -18,17 +18,29 @@ type SparkLineProps = {
 
 const SparkLine: React.FC<SparkLineProps> = props => {
   const { width: parentWidth, height: parentHeight } = props
-  const { transformedData: data, config, parseDate, formatDate, seriesHighlight, formatNumber, colorScale, handleChartAriaLabels } = useContext(ConfigContext)
+  const {
+    transformedData: data,
+    config,
+    parseDate,
+    formatDate,
+    seriesHighlight,
+    formatNumber,
+    colorScale,
+    handleChartAriaLabels
+  } = useContext(ConfigContext)
   let width = Number(parentWidth)
   const { minValue, maxValue } = useReduceData(config, data, ConfigContext)
 
-  const margin = { top: 5, right: 10, bottom: 10, left: 10 }
+  const margin = { top: 5, right: 20, bottom: 10, left: 10 }
   const height = Number(parentHeight)
 
   const xMax = width - config.runtime.yAxis.size
   const yMax = height - margin.top - 20
 
-  const getXAxisData = d => (config.runtime.xAxis.type === 'date' ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
+  const getXAxisData = d =>
+    config.runtime.xAxis.type === 'date'
+      ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime()
+      : d[config.runtime.originalXAxis.dataKey]
   const getYAxisData = (d, seriesKey) => d[seriesKey]
 
   let xScale
@@ -61,7 +73,10 @@ const SparkLine: React.FC<SparkLineProps> = props => {
         range: [0, xMax]
       })
 
-      yScale = config.runtime.xAxis.type === 'date' ? scaleLinear({ domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)] }) : scalePoint({ domain: xAxisDataMapped, padding: 0.5 })
+      yScale =
+        config.runtime.xAxis.type === 'date'
+          ? scaleLinear({ domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)] })
+          : scalePoint({ domain: xAxisDataMapped, padding: 0.5 })
 
       seriesScale = scalePoint({
         domain: config.runtime.barSeriesKeys || config.runtime.seriesKeys,
@@ -94,7 +109,14 @@ const SparkLine: React.FC<SparkLineProps> = props => {
 
   return (
     <ErrorBoundary component='SparkLine'>
-      <svg role='img' aria-label={handleChartAriaLabels(config)} width={parentWidth} height={100} className={'sparkline'} tabIndex={0}>
+      <svg
+        role='img'
+        aria-label={handleChartAriaLabels(config)}
+        width={parentWidth}
+        height={100}
+        className={'sparkline'}
+        tabIndex={0}
+      >
         <title>{`Spark line graphic with the title ${config.title ? config.title : 'No Title Found'}`}</title>
         {config.runtime.lineSeriesKeys?.length > 0
           ? config.runtime.lineSeriesKeys
@@ -104,30 +126,70 @@ const SparkLine: React.FC<SparkLineProps> = props => {
                   style={{ width }}
                   className='sparkline-group'
                   key={`series-${seriesKey}`}
-                  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'}
+                  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'
+                  }
                 >
-                  {config.labels && data.map((d, dataIndex) => {
-                    return (
-                      <Group key={`series-${seriesKey}-point-${dataIndex}`}>
-                        <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>
-                    )
-                  })}
+                  {config.labels &&
+                    data.map((d, dataIndex) => {
+                      return (
+                        <Group key={`series-${seriesKey}-point-${dataIndex}`}>
+                          <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>
+                      )
+                    })}
                   <LinePath
                     curve={allCurves.curveLinear}
                     data={data}
                     x={d => xScale(getXAxisData(d))}
                     y={d => yScale(getYAxisData(d, seriesKey))}
-                    stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
+                    stroke={
+                      colorScale
+                        ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey)
+                        : '#000'
+                    }
                     strokeWidth={2}
                     strokeOpacity={1}
                     shapeRendering='geometricPrecision'
                     markerEnd={`url(#${'arrow'}--${index})`}
                   />
-                  <MarkerArrow id={`arrow--${index}`} refX={2} size={6} markerEnd={`url(#${'arrow'}--${index})`} strokeOpacity={1} fillOpacity={1} fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'} />
+                  <MarkerArrow
+                    id={`arrow--${index}`}
+                    refX={2}
+                    size={6}
+                    markerEnd={`url(#${'arrow'}--${index})`}
+                    strokeOpacity={1}
+                    fillOpacity={1}
+                    fill={
+                      colorScale
+                        ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey)
+                        : '#000'
+                    }
+                  />
                 </Group>
                 <AxisBottom
                   top={yMax + margin.top}

package/src/components/ZoomBrush.tsx

@@ -7,7 +7,7 @@ import { ScaleLinear, ScaleBand } from 'd3-scale'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
-import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
+import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 
 interface Props {
   xScaleBrush: ScaleLinear<number, number>
@@ -210,7 +210,7 @@ const BrushHandle = props => {
   const transform = isLeft ? 'scale(-1, 1)' : 'translate(0,0)'
   const textAnchor = isLeft ? 'end' : 'start'
   const tooltipText = isLeft ? ` Drag edges to focus on a specific segment ` : ''
-  const textWidth = getTextWidth(tooltipText, `${appFontSize / 1.1}px`)
+  const textWidth = getTextWidth(tooltipText, `${APP_FONT_SIZE / 1.1}px`)
 
   return (
     <>
@@ -219,7 +219,7 @@ const BrushHandle = props => {
           x={(Number(textProps.xMax) - textWidth) / 2}
           dy={-12}
           pointerEvents='visiblePainted'
-          fontSize={appFontSize / 1.1}
+          fontSize={APP_FONT_SIZE / 1.1}
         >
           {tooltipText}
         </Text>
@@ -232,7 +232,7 @@ const BrushHandle = props => {
           y={25}
           verticalAnchor='start'
           textAnchor={textAnchor}
-          fontSize={appFontSize / 1.4}
+          fontSize={APP_FONT_SIZE / 1.4}
         >
           {isLeft ? textProps.startValue : textProps.endValue}
         </Text>

package/src/data/initial-state.js

@@ -168,11 +168,13 @@ export default {
     groupBy: '',
     shape: 'circle',
     tickRotation: '',
+    order: 'dataColumn',
     hideBorder: {
       side: false,
       topBottom: true
     },
-    position: 'right'
+    position: 'right',
+    orderedValues: []
   },
   brush: {
     height: 45,

package/src/helpers/countNumOfTicks.ts

@@ -25,7 +25,7 @@ export const countNumOfTicks = ({ axis, max, runtime, currentViewport, isHorizon
     }
     if (Number(tickCount) > Number(max) && !isHorizontal) {
       // cap it and round it so its an integer
-      tickCount = Number(min) < 0 ? Math.round(max) * 2 : Math.round(max)
+      tickCount = Math.max(2, Number(min) < 0 ? Math.round(max) * 2 : Math.round(max))
     }
   }
 

package/src/helpers/dataHelpers.ts

@@ -1,10 +1,31 @@
+import { Series } from '@cdc/core/types/Series'
 import { ChartConfig } from '../types/ChartConfig'
 
 export const getSeriesWithData = (config: ChartConfig) => {
-  const { filters, data, runtime } = config
+  const { filters, data, runtime, legend } = config
+  const { colorCode } = legend
   const { series } = runtime
 
   const filteredData = data.filter(d => filters.every(f => d[f.columnName] === f.active))
+  const colorCodeSeries = colorCode && Array.from(new Set(filteredData.map(d => d[colorCode])))
 
-  return series.filter(s => filteredData.some(d => d[s.dynamicCategory || s.dataKey])).map(s => s.name || s.dataKey)
+  const result = series
+    .flatMap(s => {
+      if (!colorCode || s.type !== 'Bar') return s
+      return colorCodeSeries.map(c => ({ ...s, colorCodeSeries: c }))
+    })
+    .map(s => ({
+      ...s,
+      data: filteredData
+        .filter(d => !s.dynamicCategory || d[s.dynamicCategory] === s.dataKey)
+        .filter(d => !s.colorCodeSeries || d[colorCode] === s.colorCodeSeries)
+        .filter(d => {
+          const key = s.dynamicCategory ? s.originalDataKey : s.dataKey
+          return d[key] || d[key] === 0
+        })
+    }))
+    .filter(s => s.data.length)
+    .map(s => s.colorCodeSeries || s.name || s.dataKey)
+
+  return result
 }

package/src/helpers/sizeHelpers.ts

@@ -2,7 +2,7 @@ import { clamp } from 'lodash'
 
 import { isMobileHeightViewport } from '@cdc/core/helpers/viewports'
 import { ChartConfig, ViewportSize } from '../types/ChartConfig'
-import { EDITOR_WIDTH } from '../CdcChartComponent'
+import { EDITOR_WIDTH } from '@cdc/core/helpers/constants'
 
 export function getOrientation(
   { orientation, heights, visualizationType }: Pick<ChartConfig, 'orientation' | 'heights' | 'visualizationType'>,

package/src/hooks/useMinMax.ts

@@ -46,7 +46,6 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
 
   min = enteredMinValue && isMinValid ? Number(enteredMinValue) : minValue
   max = enteredMaxValue && isMaxValid ? Number(enteredMaxValue) : Number.MIN_VALUE
-
   const { lower, upper } = config?.confidenceKeys || {}
 
   if (lower && upper && config.visualizationType === 'Bar') {
@@ -167,35 +166,28 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   }
 
   if (config.visualizationType === 'Line' && !convertLineToBarGraph) {
-    const isMinValid = isLogarithmicAxis
-      ? Number(enteredMinValue) >= 0 && Number(enteredMinValue) < minValue
-      : Number(enteredMinValue) < minValue
-    // update minValue for (0) Suppression points
-    const suppressedMinValue = tableData?.some((dataItem, index) => {
-      return config.preliminaryData?.some(pd => {
-        if (pd.type !== 'suppression' || !pd.style) return false
-
-        // Filter data item based on current series keys and check if pd.value is present
-        const relevantData = _.pick(dataItem, config.runtime?.seriesKeys)
-        const isValuePresent = _.values(relevantData).includes(pd.value)
-
-        // Check for value match condition
-        const valueMatch = pd.column ? dataItem[pd.column] === pd.value : isValuePresent
-
-        // Return true if the value matches and it's either the first or the last item
-        return valueMatch && (index === 0 || index === tableData.length - 1)
+    const numEnteredMin = Number(enteredMinValue)
+    const isMinValid = isLogarithmicAxis ? numEnteredMin >= 0 && numEnteredMin < minValue : numEnteredMin < minValue
+
+    const suppressedMinValue = tableData?.some((item, i, arr) =>
+      config.preliminaryData?.some(({ type, style, column, value }) => {
+        if (type !== 'suppression' || !style) return false
+
+        const values = _.values(_.pick(item, config.runtime?.seriesKeys))
+        const dynamicCategory = config.series[0].dynamicCategory
+
+        const match = column ? item[column] === value : values.includes(value)
+        const dynamic = dynamicCategory && (item[dynamicCategory] === column || !column)
+
+        return (match || dynamic) && (i === 0 || i === arr.length - 1)
       })
-    })
-    let isCategoricalAxis = config.yAxis.type === 'categorical'
-    min =
-      enteredMinValue !== '' && isMinValid
-        ? Number(enteredMinValue)
-        : suppressedMinValue
-        ? 0
-        : isCategoricalAxis
-        ? 0
-        : minValue
+    )
+
+    const isCategorical = config.yAxis.type === 'categorical'
+
+    min = enteredMinValue !== '' && isMinValid ? numEnteredMin : suppressedMinValue ? 0 : isCategorical ? 0 : minValue
   }
+
   //If data value max wasn't provided, calculate it
   if (max === Number.MIN_VALUE) {
     // if all values in data are negative set max = 0
@@ -241,6 +233,7 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
 
   if (config.visualizationType === 'Scatter Plot') {
     max = max * 1.1
+    min = min / 1.1
   }
 
   return { min, max, leftMax, rightMax }

package/src/hooks/useRightAxis.ts

@@ -1,9 +1,11 @@
 import { scaleLinear } from '@visx/scale'
 import useReduceData from './useReduceData'
+import { TOP_PADDING } from './useScales'
 
 export default function useRightAxis({ config, yMax = 0, data = [], updateConfig }) {
   const hasRightAxis = config.visualizationType === 'Combo' && config.orientation === 'vertical'
-  const rightSeriesKeys = config.series && config.series.filter(series => series.axis === 'Right').map(key => key.dataKey)
+  const rightSeriesKeys =
+    config.series && config.series.filter(series => series.axis === 'Right').map(key => key.dataKey)
   let { minValue } = useReduceData(config, data)
 
   const allRightAxisData = rightSeriesKeys => {
@@ -35,7 +37,7 @@ export default function useRightAxis({ config, yMax = 0, data = [], updateConfig
 
   const yScaleRight = scaleLinear({
     domain: [minValue, max],
-    range: [yMax, 0]
+    range: [yMax, TOP_PADDING]
   })
 
   return { yScaleRight, hasRightAxis }

package/src/hooks/useScales.ts

@@ -22,6 +22,8 @@ const scaleTypes = {
   BAND: 'band'
 }
 
+export const TOP_PADDING = 10
+
 type useScaleProps = {
   config: ChartConfig // standard chart config
   data: Object[] // standard data array
@@ -80,11 +82,13 @@ const useScales = (properties: useScaleProps) => {
   if (xAxis.type === 'date-time' || xAxis.type === 'continuous') {
     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 +=
-      visualizationType === 'Line'
-        ? 0
-        : (config.xAxis.padding ? config.xAxis.padding * 0.01 : 0) * (xAxisMax - xAxisMin)
+    let paddingRatio = config.xAxis.padding ? config.xAxis.padding * 0.01 : 0
+    if (config.brush.active) {
+      paddingRatio = config.barThickness * 0.2
+    }
+
+    xAxisMin -= paddingRatio * (xAxisMax - xAxisMin)
+    xAxisMax += visualizationType === 'Line' ? 0 : paddingRatio * (xAxisMax - xAxisMin)
     const range = config.xAxis.sortByRecentDate ? [xMax, 0] : [0, xMax]
     xScale = scaleTime({
       domain: [xAxisMin, xAxisMax],
@@ -392,7 +396,7 @@ const composeYScale = ({ min, max, yMax, config, 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]
+  const yRange = config.visualizationType === 'Bump Chart' ? [30, yMax] : [yMax, TOP_PADDING]
   // Return the configured scale function
   return scaleFunc({
     domain: domainSet,