@cdc/chart 4.24.1 → 4.24.2

package/src/components/LineChart/index.tsx

@@ -62,7 +62,11 @@ const LineChart = (props: LineChartProps) => {
           let displayArea = legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1
           const circleData = filterCircles(config.preliminaryData, rawData, seriesKey)
           // styles for preliminary Data  items
-          let styles = createStyles({ preliminaryData: config.preliminaryData, rawData, stroke: colorScale(config.runtime.seriesLabels[seriesKey]), handleLineType, lineType, seriesKey })
+          let styles = createStyles({ preliminaryData: config.preliminaryData, data: tableData, stroke: colorScale(config.runtime.seriesLabels[seriesKey]), handleLineType, lineType, seriesKey })
+
+          let xPos = d => {
+            return xScale(getXAxisData(d)) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+          }
 
           return (
             <Group
@@ -91,12 +95,14 @@ const LineChart = (props: LineChartProps) => {
                       <Bar key={'bars'} width={Number(xMax)} height={Number(yMax)} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, tableData)} onMouseOut={handleTooltipMouseOff} onClick={e => handleTooltipClick(e, data)} />
 
                       {/* Render legend */}
-                      <Text display={config.labels ? 'block' : 'none'} x={xScale(getXAxisData(d))} y={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey))} fill={'#000'} textAnchor='middle'>
+                      <Text display={config.labels ? 'block' : 'none'} x={xPos(d)} y={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey))} fill={'#000'} textAnchor='middle'>
                         {formatNumber(d[seriesKey], 'left')}
                       </Text>
 
                       {(lineDatapointStyle === 'hidden' || lineDatapointStyle === 'always show') && (
                         <LineChartCircle
+                          mode='ALWAYS_SHOW_POINTS'
+                          dataIndex={dataIndex}
                           circleData={circleData}
                           data={data}
                           d={d}
@@ -113,34 +119,104 @@ const LineChart = (props: LineChartProps) => {
                           key={`line-circle--${dataIndex}`}
                         />
                       )}
+
+                      <LineChartCircle
+                        mode='ISOLATED_POINTS'
+                        dataIndex={dataIndex}
+                        circleData={circleData}
+                        data={data}
+                        d={d}
+                        config={config}
+                        seriesKey={seriesKey}
+                        displayArea={displayArea}
+                        tooltipData={tooltipData}
+                        xScale={xScale}
+                        yScale={yScale}
+                        colorScale={colorScale}
+                        parseDate={parseDate}
+                        yScaleRight={yScaleRight}
+                        seriesAxis={seriesAxis}
+                        key={`isolated-circle-${dataIndex}`}
+                      />
                     </Group>
                   )
                 )
               })}
               <>
                 {lineDatapointStyle === 'hover' && (
-                  <LineChartCircle circleData={circleData} data={data} config={config} seriesKey={seriesKey} displayArea={displayArea} tooltipData={tooltipData} xScale={xScale} yScale={yScale} colorScale={colorScale} parseDate={parseDate} yScaleRight={yScaleRight} seriesAxis={seriesAxis} />
+                  <LineChartCircle
+                    dataIndex={0}
+                    mode='HOVER_POINTS'
+                    circleData={circleData}
+                    data={data}
+                    config={config}
+                    seriesKey={seriesKey}
+                    displayArea={displayArea}
+                    tooltipData={tooltipData}
+                    xScale={xScale}
+                    yScale={yScale}
+                    colorScale={colorScale}
+                    parseDate={parseDate}
+                    yScaleRight={yScaleRight}
+                    seriesAxis={seriesAxis}
+                  />
                 )}
               </>
-              {/* STANDARD LINE */}
-              <LinePath
-                curve={allCurves[seriesData[0].lineType]}
-                data={data}
-                x={d => xScale(getXAxisData(d))}
-                y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
-                stroke={colorScale(config.runtime.seriesLabels[seriesKey])}
-                strokeWidth={2}
-                strokeOpacity={1}
-                shapeRendering='geometricPrecision'
-                strokeDasharray={lineType ? handleLineType(lineType) : 0}
-                defined={(item, i) => {
-                  return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
-                }}
-              />
+              {/* SPLIT LINE */}
+              {config?.preliminaryData?.some(d => d.value && d.column) ? (
+                <SplitLinePath
+                  curve={allCurves[seriesData[0].lineType]}
+                  segments={(config.xAxis.type === 'date' && config.xAxis.sortDates
+                    ? data.sort((d1, d2) => {
+                        let x1 = getXAxisData(d1)
+                        let x2 = getXAxisData(d2)
+                        if (x1 < x2) return -1
+                        if (x2 < x1) return 1
+                        return 0
+                      })
+                    : data
+                  ).map(d => [d])}
+                  segmentation='x'
+                  x={d => xPos(d)}
+                  y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
+                  styles={styles}
+                  defined={(item, i) => {
+                    return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
+                  }}
+                />
+              ) : (
+                <>
+                  {/* STANDARD LINE */}
+                  <LinePath
+                    curve={allCurves[seriesData[0].lineType]}
+                    data={
+                      config.xAxis.type === 'date' && config.xAxis.sortDates
+                        ? data.sort((d1, d2) => {
+                            let x1 = getXAxisData(d1)
+                            let x2 = getXAxisData(d2)
+                            if (x1 < x2) return -1
+                            if (x2 < x1) return 1
+                            return 0
+                          })
+                        : data
+                    }
+                    x={d => xPos(d)}
+                    y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
+                    stroke={colorScale(config.runtime.seriesLabels[seriesKey])}
+                    strokeWidth={2}
+                    strokeOpacity={1}
+                    shapeRendering='geometricPrecision'
+                    strokeDasharray={lineType ? handleLineType(lineType) : 0}
+                    defined={(item, i) => {
+                      return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
+                    }}
+                  />
+                </>
+              )}
 
               {/* circles for preliminaryData data */}
               {circleData.map((d, i) => {
-                return <circle key={i} cx={xScale(getXAxisData(d))} cy={yScale(Number(getYAxisData(d, seriesKey)))} r={6} strokeWidth={2} stroke={colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000'} fill='#fff' />
+                return <circle key={i} cx={xPos(d)} cy={yScale(Number(getYAxisData(d, seriesKey)))} r={6} strokeWidth={2} stroke={colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000'} fill='#fff' />
               })}
 
               {/* ANIMATED LINE */}
@@ -149,7 +225,7 @@ const LineChart = (props: LineChartProps) => {
                   className='animation'
                   curve={seriesData.lineType}
                   data={data}
-                  x={d => xScale(getXAxisData(d))}
+                  x={d => xPos(d)}
                   y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
                   stroke='#fff'
                   strokeWidth={3}
@@ -175,7 +251,7 @@ const LineChart = (props: LineChartProps) => {
                     return <></>
                   }
                   return (
-                    <text x={xScale(getXAxisData(lastDatum)) + 5} y={yScale(getYAxisData(lastDatum, seriesKey))} alignmentBaseline='middle' fill={config.colorMatchLineSeriesLabels && colorScale ? colorScale(config.runtime.seriesLabels[seriesKey] || seriesKey) : 'black'}>
+                    <text x={xPos(lastDatum) + 5} y={yScale(getYAxisData(lastDatum, seriesKey))} alignmentBaseline='middle' fill={config.colorMatchLineSeriesLabels && colorScale ? colorScale(config.runtime.seriesLabels[seriesKey] || seriesKey) : 'black'}>
                       {config.runtime.seriesLabels[seriesKey] || seriesKey}
                     </text>
                   )

package/src/components/LinearChart.jsx

@@ -80,8 +80,8 @@ const LinearChart = props => {
     yMax = yMax + config.data.length * config.forestPlot.rowHeight
     width = dimensions[0]
   }
-  if (config.brush.active) {
-    height = height + config.brush.height
+  if (config.brush?.active) {
+    height = height + config.brush?.height
   }
 
   // hooks  % states
@@ -267,7 +267,7 @@ const LinearChart = props => {
           <Bar width={width} height={height} fill={'transparent'}></Bar> {/* Highlighted regions */}
           {/* Y axis */}
           {!['Spark Line', 'Forest Plot'].includes(visualizationType) && (
-            <AxisLeft scale={yScale} tickLength={config.useLogScale ? 6 : 8} left={Number(runtime.yAxis.size) - config.yAxis.axisPadding} label={runtime.yAxis.label} stroke='#333' tickFormat={(tick, i) => handleLeftTickFormatting(tick, i)} numTicks={handleNumTicks()}>
+            <AxisLeft scale={yScale} tickLength={config.useLogScale ? 6 : 8} left={Number(runtime.yAxis.size) - config.yAxis.axisPadding} label={runtime.yAxis.yAxis?.label || runtime.yAxis.label} stroke='#333' tickFormat={(tick, i) => handleLeftTickFormatting(tick, i)} numTicks={handleNumTicks()}>
               {props => {
                 const axisCenter = config.orientation === 'horizontal' ? (props.axisToPoint.y - props.axisFromPoint.y) / 2 : (props.axisFromPoint.y - props.axisToPoint.y) / 2
                 const horizontalTickOffset = yMax / props.ticks.length / 2 - (yMax / props.ticks.length) * (1 - config.barThickness) + 5

package/src/components/PairedBarChart.jsx

@@ -20,6 +20,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
   const groupOne = {
     parentKey: config.dataDescription.seriesKey,
     dataKey: config.series[0].dataKey,
+    dataKeyLabel: config.runtime.seriesLabels[config.series[0].dataKey] || config.series[0].dataKey,
     color: colorScale(config.runtime.seriesLabels[config.series[0].dataKey]),
     max: Math.max.apply(
       Math,
@@ -31,6 +32,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
   const groupTwo = {
     parentKey: config.dataDescription.seriesKey,
     dataKey: config.series[1].dataKey,
+    dataKeyLabel: config.runtime.seriesLabels[config.series[1].dataKey] || config.series[1].dataKey,
     color: colorScale(config.runtime.seriesLabels[config.series[1].dataKey]),
     max: Math.max.apply(
       Math,
@@ -59,7 +61,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
 
   const dataTipOne = d => {
     return `<p>
-				${config.dataDescription.seriesKey}: ${groupOne.dataKey}<br/>
+				${config.dataDescription.seriesKey}: ${groupOne.dataKeyLabel}<br/>
 				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
 				${label}${formatNumber(d[groupOne.dataKey], 'left')}
 			</p>`
@@ -67,7 +69,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
 
   const dataTipTwo = d => {
     return `<p>
-				${config.dataDescription.seriesKey}: ${groupTwo.dataKey}<br/>
+				${config.dataDescription.seriesKey}: ${groupTwo.dataKeyLabel}<br/>
 				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
 				${label}${formatNumber(d[groupTwo.dataKey], 'left')}
 			</p>`

package/src/components/PieChart/PieChart.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect, useRef } from 'react'
+import React, { useContext, useState, useEffect, useRef, useMemo } from 'react'
 import { animated, useTransition, interpolate } from 'react-spring'
 import chroma from 'chroma-js'
 
@@ -7,6 +7,7 @@ import { Pie } from '@visx/shape'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
+import { colorPalettesChart as colorPalettes } from '@cdc/core/data/colorPalettes'
 
 // cove
 import ConfigContext from '../../ConfigContext'
@@ -14,6 +15,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'
 
 const enterUpdateTransition = ({ startAngle, endAngle }) => ({
   startAngle,
@@ -29,7 +33,7 @@ type TooltipData = {
 }
 
 const PieChart = props => {
-  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, currentViewport } = useContext(ConfigContext)
+  const { transformedData: data, config, colorScale, currentViewport, dimensions, highlight, highlightReset, seriesHighlight } = useContext(ConfigContext)
   const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } = useTooltip<TooltipData>()
   const { handleTooltipMouseOver, handleTooltipMouseOff, TooltipListItem } = useCoveTooltip({
     xScale: false,
@@ -39,6 +43,50 @@ const PieChart = props => {
   })
   const [filteredData, setFilteredData] = useState(undefined)
   const [animatedPie, setAnimatePie] = useState(false)
+  const pivotColumns = Object.values(config.columns).filter(column => column.showInViz)
+  const dataNeedsPivot = pivotColumns.length > 0
+  const pivotKey = dataNeedsPivot ? 'pivotColumn' : undefined
+  const _data = useMemo(() => {
+    if (dataNeedsPivot) {
+      let newData = []
+      const primaryColumn = config.yAxis.dataKey
+      const additionalColumns = pivotColumns.map(column => column.name)
+      const allColumns = [primaryColumn, ...additionalColumns]
+      const columnToUpdate = config.xAxis.dataKey
+      data.forEach(d => {
+        allColumns.forEach(col => {
+          const data = d[col]
+          if (data) {
+            newData.push({
+              [pivotKey]: data,
+              [columnToUpdate]: `${d[columnToUpdate]} - ${col}`
+            })
+          }
+        })
+      })
+      return newData
+    }
+    return data
+  }, [data, dataNeedsPivot])
+
+  const _colorScale = useMemo(() => {
+    if (dataNeedsPivot) {
+      const keys = {}
+      _data.forEach(d => {
+        if (!keys[d[config.xAxis.dataKey]]) keys[d[config.xAxis.dataKey]] = true
+      })
+      const numberOfKeys = Object.entries(keys).length
+      let palette = config.customColors || colorPalettes[config.palette]
+      palette = palette.slice(0, numberOfKeys)
+
+      return scaleOrdinal({
+        domain: Object.keys(keys),
+        range: palette,
+        unknown: null
+      })
+    }
+    return colorScale
+  }, [colorScale, dataNeedsPivot])
 
   const triggerRef = useRef()
   const dataRef = useIntersectionObserver(triggerRef, {
@@ -96,7 +144,7 @@ const PieChart = props => {
                     endAngle
                   })
                 )}
-                fill={colorScale(arc.data[config.runtime.xAxis.dataKey])}
+                fill={_colorScale(arc.data[config.runtime.xAxis.dataKey])}
                 onMouseEnter={e => handleTooltipMouseOver(e, { data: arc.data[config.runtime.xAxis.dataKey], arc })}
                 onMouseLeave={e => handleTooltipMouseOff()}
               />
@@ -108,7 +156,7 @@ const PieChart = props => {
           const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1
 
           let textColor = '#FFF'
-          if (colorScale(arc.data[config.runtime.xAxis.dataKey]) && chroma.contrast(textColor, colorScale(arc.data[config.runtime.xAxis.dataKey])) < 3.5) {
+          if (_colorScale(arc.data[config.runtime.xAxis.dataKey]) && chroma.contrast(textColor, _colorScale(arc.data[config.runtime.xAxis.dataKey])) < 3.5) {
             textColor = '000'
           }
 
@@ -143,7 +191,7 @@ const PieChart = props => {
     if (seriesHighlight.length > 0 && config.legend.behavior !== 'highlight') {
       let newFilteredData = []
 
-      data.forEach(d => {
+      _data.forEach(d => {
         if (seriesHighlight.indexOf(d[config.runtime.xAxis.dataKey]) !== -1) {
           newFilteredData.push(d)
         }
@@ -155,33 +203,38 @@ const PieChart = props => {
     }
   }, [seriesHighlight]) // eslint-disable-line
 
+  const createLegendLabels = createFormatLabels(config, [], _data, _colorScale)
+
   return (
-    <ErrorBoundary component='PieChart'>
-      <svg width={width} height={height} className={`animated-pie group ${config.animate === false || animatedPie ? 'animated' : ''}`} role='img' aria-label={handleChartAriaLabels(config)}>
-        <Group top={centerY} left={centerX}>
-          {/* prettier-ignore */}
-          <Pie
-            data={filteredData || data}
-            pieValue={d => d[config.runtime.yAxis.dataKey]}
+    <>
+      <ErrorBoundary component='PieChart'>
+        <svg width={width} height={height} className={`animated-pie group ${config.animate === false || animatedPie ? 'animated' : ''}`} role='img' aria-label={handleChartAriaLabels(config)}>
+          <Group top={centerY} left={centerX}>
+            {/* prettier-ignore */}
+            <Pie
+            data={filteredData || _data}
+            pieValue={d => 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>
-        </Group>
-      </svg>
-      <div ref={triggerRef} />
-      {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' /> */}
-    </ErrorBoundary>
+          </Group>
+        </svg>
+        <div ref={triggerRef} />
+        {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' /> */}
+      </ErrorBoundary>
+      <LegendComponent config={config} colorScale={_colorScale} seriesHighlight={seriesHighlight} highlight={highlight} highlightReset={highlightReset} currentViewport={currentViewport} formatLabels={createLegendLabels} />
+    </>
   )
 }
 

package/src/components/Regions/components/Regions.tsx

@@ -5,11 +5,10 @@ import { ChartContext } from '../../../types/ChartContext'
 import { Text } from '@visx/text'
 import { Group } from '@visx/group'
 import * as d3 from 'd3'
+import { formatDate } from '@cdc/core/helpers/cove/date.js'
 
 type RegionsProps = {
   xScale: Function
-  barWidth: number
-  totalBarsInGroup: number
   yMax: number
   barWidth?: number
   totalBarsInGroup?: number
@@ -60,9 +59,9 @@ const Regions = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, handleToolt
 
         let previousDays = Number(region.from)
         let lastDate = region.toType === 'Last Date' ? domain[domain.length - 1] : region.to
-        let fromDate = new Date(lastDate)
+        let toDate = new Date(lastDate)
 
-        from = new Date(fromDate.setDate(fromDate.getDate() - previousDays)).getTime()
+        from = new Date(toDate.setDate(toDate.getDate() - previousDays)).getTime()
         let targetValue = from
 
         let index = bisectDate(domain, targetValue)
@@ -75,7 +74,6 @@ const Regions = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, handleToolt
           let d1 = domain[index]
           closestValue = targetValue - d0 > d1 - targetValue ? d1 : d0
         }
-
         from = Number(xScale(closestValue) - (visualizationType === 'Bar' || visualizationType === 'Combo' ? (barWidth * totalBarsInGroup) / 2 : 0))
 
         width = to - from
@@ -89,6 +87,17 @@ const Regions = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, handleToolt
         width = to - from
       }
 
+      if (region.fromType === 'Previous Days' && xAxis.type === 'date' && xAxis.sortDates && config.visualizationType === 'Line') {
+        let domain = xScale.domain()
+        let previousDays = Number(region.from)
+        let to = region.toType === 'Last Date' ? formatDate(config.xAxis.dateParseFormat, domain[domain.length - 1]) : region.to
+        let toDate = new Date(to)
+        from = new Date(toDate.setDate(toDate.getDate() - previousDays)).getTime()
+        from = xScale(from)
+        to = xScale(parseDate(to))
+        width = to - from
+      }
+
       if (!from) return null
       if (!to) return null
 

package/src/data/initial-state.js

@@ -53,6 +53,7 @@ export default {
     rightAxisTickColor: '#333',
     numTicks: '',
     axisPadding: 0,
+    scalePadding: 10,
     tickRotation: 0,
     anchors: []
   },
@@ -129,7 +130,8 @@ export default {
     showDataTableLink: true,
     indexLabel: '',
     download: false,
-    showVertical: true
+    showVertical: true,
+    dateDisplayFormat: ''
   },
   orientation: 'vertical',
   color: 'pinkpurple',
@@ -191,7 +193,8 @@ export default {
   series: [],
   tooltips: {
     opacity: 90,
-    singleSeries: false
+    singleSeries: false,
+    dateDisplayFormat: ''
   },
   forestPlot: {
     startAt: 0,

package/src/helpers/computeMarginBottom.ts

@@ -4,9 +4,9 @@ export const computeMarginBottom = (config: ChartConfig, legend: Legend, current
   const isLegendBottom = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
   const isHorizontal = config.orientation === 'horizontal'
   const tickRotation = Number(config.xAxis.tickRotation) > 0 ? Number(config.xAxis.tickRotation) : 0
-  const isBrush = config.brush.active
+  const isBrush = config?.brush?.active
   const offset = 20
-  const brushHeight = config.brush.height
+  const brushHeight = config?.brush?.height
   let bottom = 0
   if (!isLegendBottom && isHorizontal && !config.yAxis.label) {
     bottom = Number(config.xAxis.labelOffset)

package/src/hooks/useHighlightedBars.js

@@ -127,7 +127,7 @@ export const useHighlightedBars = (config, updateConfig) => {
    */
   HighLightedBarUtils.findDuplicates = arr => {
     const duplicates = {}
-    const result = arr.filter(obj => {
+    const result = arr?.filter(obj => {
       const { legendLabel } = obj
       if (!duplicates[legendLabel]) {
         duplicates[legendLabel] = true

package/src/hooks/useMinMax.ts

@@ -181,10 +181,10 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   if (config.yAxis.enablePadding) {
     if (min < 0) {
       // sets with negative data need more padding on the max
-      max *= 1.2
-      min *= 1.2
+      max *= 1 + (config.yAxis.scalePadding * 2) / 100
+      min *= 1 + (config.yAxis.scalePadding * 2) / 100
     } else {
-      max *= 1.1
+      max *= 1 + config.yAxis.scalePadding / 100
     }
   }
 

package/src/hooks/useScales.ts

@@ -56,21 +56,25 @@ const useScales = (properties: useScaleProps) => {
 
   // handle  Vertical bars
   if (!isHorizontal) {
-    xScaleBrush = composeScalePoint(xAxisDataKeysMapped, [0, xMax], 0.5)
-    xScale = composeScalePoint(xAxisDataMapped, [0, xMax], 0.5)
-    xScale.type = scaleTypes.POINT
+    xScaleBrush = composeScalePoint(xAxisDataKeysMapped, [0, xMax], .5)
+    xScale = composeScaleBand(xAxisDataMapped, [0, xMax], 1 - config.barThickness)
     yScale = composeYScale(properties)
-    seriesScale = composeScalePoint(seriesDomain, [0, xMax])
+    seriesScale = composeScaleBand(seriesDomain, [0, xScale.bandwidth()], 0)
   }
 
   // handle Area chart
   if (config.xAxis.type === 'date' && config.xAxis.sortDates) {
+    let xAxisMin = Math.min(...xAxisDataMapped)
+    let xAxisMax = Math.max(...xAxisDataMapped)
+    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({
-      domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)],
+      domain: [xAxisMin, xAxisMax],
       range: [0, xMax]
     })
     xScaleBrush = xScale
     xScale.type = scaleTypes.LINEAR
+    seriesScale = composeScaleBand(seriesDomain, [0, config.barThickness * (xMax)], 0)
   }
 
   // handle Deviation bar
@@ -284,3 +288,12 @@ const composeScalePoint = (domain, range, padding = 0) => {
     type: 'point'
   })
 }
+
+const composeScaleBand = (domain, range, padding = 0) => {
+  return scaleBand({
+    domain: domain,
+    range: range,
+    padding: padding,
+    type: 'band'
+  })
+}

package/src/hooks/useTooltip.tsx

@@ -11,9 +11,9 @@ const transform = new DataTransform()
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 
 export const useTooltip = props => {
-  const { tableData, config, formatNumber, capitalize, formatDate, parseDate, setSharedFilter } = useContext<ChartContext>(ConfigContext)
+  const { tableData, config, formatNumber, capitalize, formatDate, formatTooltipsDate, parseDate, setSharedFilter } = useContext<ChartContext>(ConfigContext)
   const { xScale, yScale, showTooltip, hideTooltip } = props
-  const { xAxis, visualizationType, orientation, yAxis, runtime, barWidth } = config
+  const { xAxis, visualizationType, orientation, yAxis, runtime } = config
   const data = transform.applySuppression(tableData, config.suppressedData)
   /**
    * Provides the tooltip information based on the tooltip data array and svg cursor coordinates
@@ -227,10 +227,12 @@ export const useTooltip = props => {
     }
 
     if (config.xAxis.type === 'categorical' || (visualizationType === 'Combo' && orientation !== 'horizontal' && visualizationType !== 'Forest Plot')) {
-      let eachBand = xScale.step()
+      let range = xScale.range()[1] - xScale.range()[0]
+      let eachBand = range / (xScale.domain().length + 1)
+
       let numerator = x
-      const index = Math.floor(Number(numerator) / eachBand)
-      return xScale.domain()[index - 1] // fixes off by 1 error
+      const index = Math.floor((Number(numerator) - eachBand / 2) / eachBand)
+      return xScale.domain()[index] // fixes off by 1 error
     }
 
     if (config.xAxis.type === 'date' && visualizationType !== 'Combo' && orientation !== 'horizontal') {
@@ -426,10 +428,12 @@ export const useTooltip = props => {
       if (key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.xAxis.dataKey ? `${config.xAxis.dataKey}: ` : '')} ${config.yAxis.type === 'date' ? formatDate(parseDate(key, false)) : value}`}</li>
       return <li className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${formatNumber(value, 'left')}`}</li>
     }
+    const formattedDate = config.tooltips.dateDisplayFormat ? formatTooltipsDate(parseDate(value, false)) : formatDate(parseDate(value, false))
 
     // TOOLTIP HEADING
-    if (visualizationType === 'Bar' && orientation === 'horizontal' && key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ` : '')} ${value}`}</li>
-    if (key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ` : '')} ${config.xAxis.type === 'date' ? value : value}`}</li>
+    if (visualizationType === 'Bar' && orientation === 'horizontal' && key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ` : '')} ${config.xAxis.type === 'date' ? formattedDate : value}`}</li>
+
+    if (key === config.xAxis.dataKey) return <li className='tooltip-heading'>{`${capitalize(config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ` : '')} ${config.xAxis.type === 'date' ? formattedDate : value}`}</li>
 
     // TOOLTIP BODY
     return <li className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${value}`}</li>