@cdc/chart 4.23.10 → 4.24.1

package/src/components/{LineChart.tsx → LineChart/index.tsx}

@@ -2,32 +2,53 @@ import React, { useContext } from 'react'
 
 import * as allCurves from '@visx/curve'
 import { Group } from '@visx/group'
-import { LinePath, Bar } from '@visx/shape'
+import { LinePath, Bar, SplitLinePath } from '@visx/shape'
 import { Text } from '@visx/text'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import ConfigContext from '../ConfigContext'
-import useRightAxis from '../hooks/useRightAxis'
-import LineChartCircle from './LineChart.Circle'
-
-const LineChart = ({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, handleTooltipMouseOver, handleTooltipMouseOff, showTooltip, seriesStyle = 'Line', svgRef, handleTooltipClick, tooltipData }) => {
-  // Not sure why there's a redraw here.
-
-  const { colorPalettes, transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, isNumber, updateConfig, handleLineType, dashboardConfig, tableData } = useContext(ConfigContext)
+import ConfigContext from '../../ConfigContext'
+import useRightAxis from '../../hooks/useRightAxis'
+import { filterCircles, createStyles } from './helpers'
+import LineChartCircle from './components/LineChart.Circle'
+
+// types
+import { type ChartContext } from '../../types/ChartContext'
+import { type LineChartProps } from './LineChartProps'
+
+const LineChart = (props: LineChartProps) => {
+  // prettier-ignore
+  const {
+    getXAxisData,
+    getYAxisData,
+    handleTooltipClick,
+    handleTooltipMouseOff,
+    handleTooltipMouseOver,
+    tooltipData,
+    xMax,
+    xScale,
+    yMax,
+    yScale,
+  } = props
+
+  // prettier-ignore
+  const {
+    colorScale,
+    config,
+    formatNumber,
+    handleLineType,
+    isNumber,
+    parseDate,
+    seriesHighlight,
+    tableData,
+    transformedData: data,
+    updateConfig,
+    rawData
+  } = useContext<ChartContext>(ConfigContext)
   const { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
-
   if (!handleTooltipMouseOver) return
-  const handleAxisFormating = (axis = 'left', label, value) => {
-    // if this is an x axis category/date value return without doing any formatting.
-    // if (label === config.runtime.xAxis.label) return value
-    axis = String(axis).toLocaleLowerCase()
-    if (label) {
-      return `${label}: ${formatNumber(value, axis)}`
-    }
-    return `${formatNumber(value, axis)}`
-  }
 
   const DEBUG = false
+  const { lineDatapointStyle, showLineSeriesLabels, legend } = config
 
   return (
     <ErrorBoundary component='LineChart'>
@@ -38,22 +59,22 @@ const LineChart = ({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, han
           let lineType = config.series.filter(item => item.dataKey === seriesKey)[0].type
           const seriesData = config.series.filter(item => item.dataKey === seriesKey)
           const seriesAxis = seriesData[0].axis ? seriesData[0].axis : 'left'
-
-          let displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1
+          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 })
 
           return (
             <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 && !config.legend.dynamicLegend) || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
+              opacity={legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
+              display={legend.behavior === 'highlight' || (seriesHighlight.length === 0 && !legend.dynamicLegend) || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
             >
               {data.map((d, dataIndex) => {
                 // Find the series object from the config.series array that has a dataKey matching the seriesKey variable.
                 const series = config.series.find(({ dataKey }) => dataKey === seriesKey)
                 const { axis } = series
 
-                const xAxisValue = config.runtime.xAxis.type === 'date' ? formatDate(parseDate(d[config.runtime.xAxis.dataKey])) : d[config.runtime.xAxis.dataKey]
-                const yAxisValue = getYAxisData(d, seriesKey)
                 const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
                 const labeltype = axis === 'Right' ? 'rightLabel' : 'label'
                 let label = config.runtime.yAxis[labeltype]
@@ -74,54 +95,74 @@ const LineChart = ({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, han
                         {formatNumber(d[seriesKey], 'left')}
                       </Text>
 
-                      {config.lineDatapointStyle === 'hidden' ||
-                        (config.lineDatapointStyle === 'always show' && <LineChartCircle d={d} config={config} seriesKey={seriesKey} displayArea={displayArea} tooltipData={tooltipData} xScale={xScale} yScale={yScale} colorScale={colorScale} parseDate={parseDate} yScaleRight={yScaleRight} />)}
+                      {(lineDatapointStyle === 'hidden' || lineDatapointStyle === 'always show') && (
+                        <LineChartCircle
+                          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={`line-circle--${dataIndex}`}
+                        />
+                      )}
                     </Group>
                   )
                 )
               })}
-
-              <>{config.lineDatapointStyle === 'hover' && <LineChartCircle config={config} seriesKey={seriesKey} displayArea={displayArea} tooltipData={tooltipData} xScale={xScale} yScale={yScale} colorScale={colorScale} parseDate={parseDate} yScaleRight={yScaleRight} seriesAxis={seriesAxis} />}</>
-
+              <>
+                {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} />
+                )}
+              </>
+              {/* STANDARD LINE */}
               <LinePath
                 curve={allCurves[seriesData[0].lineType]}
                 data={data}
                 x={d => xScale(getXAxisData(d))}
-                y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey)))}
-                stroke={
-                  config.customColors
-                    ? config.customColors[index]
-                    : colorScale
-                    ? colorPalettes[config.palette][index]
-                    : // fallback
-                      '#000'
-                }
+                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' />
+              })}
+
+              {/* ANIMATED LINE */}
               {config.animate && (
                 <LinePath
                   className='animation'
                   curve={seriesData.lineType}
                   data={data}
                   x={d => xScale(getXAxisData(d))}
-                  y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey)))}
+                  y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
                   stroke='#fff'
                   strokeWidth={3}
                   strokeOpacity={1}
                   shapeRendering='geometricPrecision'
                   strokeDasharray={lineType ? handleLineType(lineType) : 0}
                   defined={(item, i) => {
-                    return isNumber(item[config.runtime.seriesLabels[seriesKey]])
+                    return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
                   }}
                 />
               )}
               {/* Render series labels at end if each line if selected in the editor */}
-              {config.showLineSeriesLabels &&
+              {showLineSeriesLabels &&
                 (config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map(seriesKey => {
                   let lastDatum
                   for (let i = data.length - 1; i >= 0; i--) {

package/src/components/LinearChart.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef, useState, useMemo } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 
 // Libraries
 import { AxisLeft, AxisBottom, AxisRight, AxisTop } from '@visx/axis'
@@ -6,14 +6,13 @@ import { Group } from '@visx/group'
 import { Line, Bar } from '@visx/shape'
 import { Text } from '@visx/text'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
-import { useTooltip, TooltipWithBounds, useTooltipInPortal } from '@visx/tooltip'
+import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
 
 // CDC Components
-import AreaChart from './AreaChart'
-import AreaChartStacked from './AreaChart.Stacked'
+import { AreaChart, AreaChartStacked } from './AreaChart'
 import BarChart from './BarChart'
 import ConfigContext from '../ConfigContext'
-import CoveBoxPlot from './BoxPlot'
+import BoxPlot from './BoxPlot'
 import ScatterPlot from './ScatterPlot'
 import DeviationBar from './DeviationBar'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
@@ -22,6 +21,7 @@ import LineChart from './LineChart'
 import ForestPlot from './ForestPlot'
 import PairedBarChart from './PairedBarChart'
 import useIntersectionObserver from './../hooks/useIntersectionObserver'
+import Regions from './Regions'
 
 // Hooks
 import useMinMax from '../hooks/useMinMax'
@@ -30,13 +30,33 @@ import useRightAxis from '../hooks/useRightAxis'
 import useScales from '../hooks/useScales'
 import useTopAxis from '../hooks/useTopAxis'
 import { useTooltip as useCoveTooltip } from '../hooks/useTooltip'
+import { useEditorPermissions } from './EditorPanel/useEditorPermissions'
 
 // styles
-import '../scss/LinearChart.scss'
+import ZoomBrush from './ZoomBrush'
 
 const LinearChart = props => {
-  const { isEditor, isDashboard, transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig, handleLineType, rawData, capitalize, setSharedFilter, setSharedFilterValue, getTextWidth, isDebug } = useContext(ConfigContext)
-
+  const {
+    isEditor,
+    isDashboard,
+    computeMarginBottom,
+    transformedData: data,
+    dimensions,
+    config,
+    parseDate,
+    formatDate,
+    currentViewport,
+    formatNumber,
+    handleChartAriaLabels,
+    updateConfig,
+    handleLineType,
+    rawData,
+    capitalize,
+    setSharedFilter,
+    setSharedFilterValue,
+    getTextWidth,
+    isDebug
+  } = useContext(ConfigContext)
   // todo: start destructuring this file for conciseness
   const { visualizationType, visualizationSubType, orientation, xAxis, yAxis, runtime, debugSvg } = config
 
@@ -49,7 +69,7 @@ const LinearChart = props => {
   }
   //  configure height , yMax, xMax
   const { horizontal: heightHorizontal } = config.heights
-  const isHorizontal = orientation === 'horizontal'
+  const isHorizontal = orientation === 'horizontal' || config.visualizationType === 'Forest Plot'
   const shouldAbbreviate = true
   let height = config.aspectRatio ? width * config.aspectRatio : config.visualizationType === 'Forest Plot' ? config.heights['vertical'] : config.heights[orientation]
   const xMax = width - runtime.yAxis.size - (visualizationType === 'Combo' ? config.yAxis.rightAxisSize : 0)
@@ -58,16 +78,18 @@ const LinearChart = props => {
   if (config.visualizationType === 'Forest Plot') {
     height = height + config.data.length * config.forestPlot.rowHeight
     yMax = yMax + config.data.length * config.forestPlot.rowHeight
+    width = dimensions[0]
+  }
+  if (config.brush.active) {
+    height = height + config.brush.height
   }
-
-  let dynamicMarginTop = 0 || config.dynamicMarginTop
-  const marginTop = 20
 
   // hooks  % states
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, data)
-  const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data, updateConfig })
+  const { visSupportsReactTooltip } = useEditorPermissions()
   const { hasTopAxis } = useTopAxis(config)
   const [animatedChart, setAnimatedChart] = useState(false)
+  const [point, setPoint] = useState({ x: 0, y: 0 })
 
   // refs
   const triggerRef = useRef()
@@ -79,11 +101,12 @@ const LinearChart = props => {
   // getters & functions
   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]
-  const xAxisDataMapped = data.map(d => getXAxisData(d))
-  const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
+  const xAxisDataMapped = config.brush.active && config.brush.data?.length ? config.brush.data.map(d => getXAxisData(d)) : data.map(d => getXAxisData(d))
+  const section = config.orientation === 'horizontal' || config.visualizationType === 'Forest Plot' ? 'yAxis' : 'xAxis'
   const properties = { data, config, minValue, maxValue, isAllLine, existPositiveValue, xAxisDataMapped, xMax, yMax }
-  const { min, max } = useMinMax(properties)
-  const { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding } = useScales({ ...properties, min, max })
+  const { min, max, leftMax, rightMax } = useMinMax(properties)
+  const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data, updateConfig })
+  const { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding, xScaleBrush } = useScales({ ...properties, min, max, leftMax, rightMax, dimensions })
 
   // sets the portal x/y for where tooltips should appear on the page.
   const [chartPosition, setChartPosition] = useState(null)
@@ -109,9 +132,11 @@ const LinearChart = props => {
       // when logarithmic scale applied change value FIRST  of  tick
       tick = 0
     }
-    if (runtime.xAxis.type === 'date') return formatDate(tick)
-    if (orientation === 'horizontal') return formatNumber(tick, 'left', shouldAbbreviate)
-    if (config.xAxis.type === 'continuous') return formatNumber(tick, 'bottom', shouldAbbreviate)
+
+    if (runtime.xAxis.type === 'date' && config.visualizationType !== 'Forest Plot') return formatDate(tick)
+    if (orientation === 'horizontal' && config.visualizationType !== 'Forest Plot') return formatNumber(tick, 'left', shouldAbbreviate)
+    if (config.xAxis.type === 'continuous' && config.visualizationType !== 'Forest Plot') return formatNumber(tick, 'bottom', shouldAbbreviate)
+    if (config.visualizationType === 'Forest Plot') return formatNumber(tick, 'left', config.dataFormat.abbreviated, config.runtime.xAxis.prefix, config.runtime.xAxis.suffix, Number(config.dataFormat.roundTo))
     return tick
   }
 
@@ -147,7 +172,12 @@ const LinearChart = props => {
           tickCount = 4 // same default as standalone components
         }
       }
+
+      if (config.visualizationType === 'Forest Plot') {
+        tickCount = config.yAxis.numTicks !== '' ? config.yAxis.numTicks : 4
+      }
     }
+
     return tickCount
   }
 
@@ -206,61 +236,40 @@ const LinearChart = props => {
     return countNumOfTicks('yAxis')
   }
 
+  const onMouseMove = event => {
+    const svgRect = event.currentTarget.getBoundingClientRect()
+    const x = event.clientX - svgRect.left
+    const y = event.clientY - svgRect.top
+
+    setPoint({
+      x,
+      y
+    })
+  }
+
   return isNaN(width) ? (
     <React.Fragment></React.Fragment>
   ) : (
     <ErrorBoundary component='LinearChart'>
       {/* ! Notice - div needed for tooltip boundaries (flip/flop) */}
       <div style={{ width: `${width}px`, height: `${height}px`, overflow: 'visible' }} className='tooltip-boundary'>
-        <svg width={'100%'} height={'100%'} className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${debugSvg && 'debug'}`} role='img' aria-label={handleChartAriaLabels(config)} ref={svgRef} style={{ overflow: 'visible' }}>
+        <svg
+          // onMouseLeave={() => setPoint(null)}
+          onMouseMove={onMouseMove}
+          width={'100%'}
+          height={'100%'}
+          className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${debugSvg && 'debug'}`}
+          role='img'
+          aria-label={handleChartAriaLabels(config)}
+          ref={svgRef}
+          style={{ overflow: 'visible' }}
+        >
           <Bar width={width} height={height} fill={'transparent'}></Bar> {/* Highlighted regions */}
-          {config.regions
-            ? config.regions.map(region => {
-                if (!Object.keys(region).includes('from') || !Object.keys(region).includes('to')) return null
-
-                let from
-                let to
-                let width
-
-                if (config.xAxis.type === 'date') {
-                  from = xScale(parseDate(region.from).getTime())
-                  to = xScale(parseDate(region.to).getTime())
-                  width = to - from
-                }
-
-                if (config.xAxis.type === 'categorical') {
-                  from = xScale(region.from)
-                  to = xScale(region.to)
-                  width = to - from
-                }
-
-                if (!from) return null
-                if (!to) return null
-
-                return (
-                  <Group className='regions' left={Number(runtime.yAxis.size)} key={region.label}>
-                    <path
-                      stroke='#333'
-                      d={`M${from} -5
-                          L${from} 5
-                          M${from} 0
-                          L${to} 0
-                          M${to} -5
-                          L${to} 5`}
-                    />
-                    <rect x={from} y={0} width={width} height={yMax} fill={region.background} opacity={0.3} />
-                    <Text x={from + width / 2} y={5} fill={region.color} verticalAnchor='start' textAnchor='middle'>
-                      {region.label}
-                    </Text>
-                  </Group>
-                )
-              })
-            : ''}
           {/* 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()}>
               {props => {
-                const axisCenter = runtime.horizontal ? (props.axisToPoint.y - props.axisFromPoint.y) / 2 : (props.axisFromPoint.y - props.axisToPoint.y) / 2
+                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
                 return (
                   <Group className='left-axis'>
@@ -273,7 +282,7 @@ const LinearChart = props => {
 
                       return (
                         <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
-                          {!runtime.yAxis.hideTicks && <Line key={`${tick.value}--hide-hideTicks`} from={tick.from} to={config.useLogScale ? to : tick.to} stroke={config.yAxis.tickColor} display={runtime.horizontal ? 'none' : 'block'} />}
+                          {!runtime.yAxis.hideTicks && <Line key={`${tick.value}--hide-hideTicks`} from={tick.from} to={config.useLogScale ? to : tick.to} stroke={config.yAxis.tickColor} display={orientation === 'horizontal' ? 'none' : 'block'} />}
 
                           {runtime.yAxis.gridLines ? <Line key={`${tick.value}--hide-hideGridLines`} display={(config.useLogScale && showTicks).toString()} from={{ x: tick.from.x + xMax, y: tick.from.y }} to={tick.from} stroke='rgba(0,0,0,0.3)' /> : ''}
 
@@ -336,7 +345,7 @@ const LinearChart = props => {
           {hasRightAxis && (
             <AxisRight scale={yScaleRight} left={Number(width - config.yAxis.rightAxisSize)} label={config.yAxis.rightLabel} tickFormat={tick => formatNumber(tick, 'right')} numTicks={runtime.yAxis.rightNumTicks || undefined} labelOffset={45}>
               {props => {
-                const axisCenter = runtime.horizontal ? (props.axisToPoint.y - props.axisFromPoint.y) / 2 : (props.axisFromPoint.y - props.axisToPoint.y) / 2
+                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
                 return (
                   <Group className='right-axis'>
@@ -380,7 +389,7 @@ const LinearChart = props => {
           {visualizationType !== 'Paired Bar' && visualizationType !== 'Spark Line' && (
             <AxisBottom
               top={runtime.horizontal && config.visualizationType !== 'Forest Plot' ? Number(heightHorizontal) + Number(config.xAxis.axisPadding) : config.visualizationType === 'Forest Plot' ? yMax + Number(config.xAxis.axisPadding) : yMax + Number(config.xAxis.axisPadding)}
-              left={Number(runtime.yAxis.size)}
+              left={config.visualizationType !== 'Forest Plot' ? Number(runtime.yAxis.size) : 0}
               label={runtime.xAxis.label}
               tickFormat={handleBottomTickFormatting}
               scale={xScale}
@@ -389,7 +398,7 @@ const LinearChart = props => {
               tickStroke='#333'
             >
               {props => {
-                const axisCenter = config.visualizationType !== 'Forest Plot' ? (props.axisToPoint.x - props.axisFromPoint.x) / 2 : width / 2
+                const axisCenter = config.visualizationType !== 'Forest Plot' ? (props.axisToPoint.x - props.axisFromPoint.x) / 2 : dimensions[0] / 2
                 const containsMultipleWords = inputString => /\s/.test(inputString)
                 const ismultiLabel = props.ticks.some(tick => containsMultipleWords(tick.value))
 
@@ -422,11 +431,14 @@ const LinearChart = props => {
                   }
                 })
 
-                dynamicMarginTop = areTicksTouching && config.isResponsiveTicks ? tickWidthMax + defaultTickLength + marginTop : 0
+                const dynamicMarginTop = areTicksTouching && config.isResponsiveTicks ? tickWidthMax + defaultTickLength + 20 : 0
+                const rotation = Number(config.xAxis.tickRotation) > 0 ? Number(config.xAxis.tickRotation) : 0
+
                 config.dynamicMarginTop = dynamicMarginTop
+                config.xAxis.tickWidthMax = tickWidthMax
 
                 return (
-                  <Group className='bottom-axis'>
+                  <Group className='bottom-axis' width={dimensions[0]}>
                     {props.ticks.map((tick, i, propsTicks) => {
                       // when using LogScale show major ticks values only
                       const showTick = String(tick.value).startsWith('1') || tick.value === 0.1 ? 'block' : 'none'
@@ -443,7 +455,7 @@ const LinearChart = props => {
 
                       return (
                         <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
-                          {!config.xAxis.hideTicks && <Line from={tick.from} to={orientation === 'horizontal' && config.useLogScale ? to : tick.to} stroke={config.xAxis.tickColor} strokeWidth={showTick === 'block' ? 1.3 : 1} />}
+                          {!config.xAxis.hideTicks && <Line from={tick.from} to={orientation === 'horizontal' && config.useLogScale ? to : tick.to} stroke={config.xAxis.tickColor} strokeWidth={showTick === 'block' && config.useLogScale ? 1.3 : 1} />}
                           {!config.xAxis.hideLabel && (
                             <Text
                               dy={config.orientation === 'horizontal' && config.useLogScale ? 8 : 0}
@@ -463,7 +475,24 @@ const LinearChart = props => {
                       )
                     })}
                     {!config.xAxis.hideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
-                    <Text x={axisCenter} y={config.orientation === 'horizontal' ? dynamicMarginTop || config.xAxis.labelOffset : dynamicMarginTop || config.xAxis.size} textAnchor='middle' fontWeight='bold' fill={config.xAxis.labelColor}>
+                    <Text
+                      x={axisCenter}
+                      y={
+                        config.visualizationType === 'Forest Plot'
+                          ? config.xAxis.tickWidthMax + 40
+                          : config.orientation === 'horizontal'
+                          ? dynamicMarginTop || config.xAxis.labelOffset
+                          : config.isResponsiveTicks && dynamicMarginTop && !isHorizontal
+                          ? dynamicMarginTop
+                          : Number(rotation) && !config.isResponsiveTicks && !isHorizontal
+                          ? Number(rotation + tickWidthMax / 1.3)
+                          : Number(config.xAxis.labelOffset)
+                      }
+                      textAnchor='middle'
+                      verticalAnchor='start'
+                      fontWeight='bold'
+                      fill={config.xAxis.labelColor}
+                    >
                       {props.label}
                     </Text>
                   </Group>
@@ -537,7 +566,7 @@ const LinearChart = props => {
               </AxisBottom>
             </>
           )}
-          {visualizationType === 'Deviation Bar' && <DeviationBar animatedChart={animatedChart} xScale={xScale} yScale={yScale} width={xMax} height={yMax} />}
+          {visualizationType === 'Deviation Bar' && config.series?.length === 1 && <DeviationBar animatedChart={animatedChart} xScale={xScale} yScale={yScale} width={xMax} height={yMax} />}
           {visualizationType === 'Paired Bar' && <PairedBarChart originalWidth={width} width={xMax} height={yMax} />}
           {visualizationType === 'Scatter Plot' && (
             <ScatterPlot
@@ -554,7 +583,7 @@ const LinearChart = props => {
               showTooltip={showTooltip}
             />
           )}
-          {visualizationType === 'Box Plot' && <CoveBoxPlot xScale={xScale} yScale={yScale} />}
+          {visualizationType === 'Box Plot' && <BoxPlot xScale={xScale} yScale={yScale} />}
           {((visualizationType === 'Area Chart' && config.visualizationSubType === 'regular') || visualizationType === 'Combo') && (
             <AreaChart xScale={xScale} yScale={yScale} yMax={yMax} xMax={xMax} chartRef={svgRef} width={xMax} height={yMax} handleTooltipMouseOver={handleTooltipMouseOver} handleTooltipMouseOff={handleTooltipMouseOff} tooltipData={tooltipData} showTooltip={showTooltip} />
           )}
@@ -624,10 +653,8 @@ const LinearChart = props => {
               xScale={xScale}
               yScale={yScale}
               seriesScale={seriesScale}
-              width={xMax}
-              height={yMax}
-              maxWidth={width}
-              maxHeight={height}
+              width={width}
+              height={height}
               getXAxisData={getXAxisData}
               getYAxisData={getYAxisData}
               animatedChart={animatedChart}
@@ -641,6 +668,8 @@ const LinearChart = props => {
               config={config}
             />
           )}
+          {/*Zoom Brush */}
+          {['Line', 'Bar', 'Combo', 'Area Chart'].includes(config.visualizationType) && !isHorizontal && <ZoomBrush xScaleBrush={xScaleBrush} yScale={yScale} xMax={xMax} yMax={yMax} />}
           {/* Line chart */}
           {/* TODO: Make this just line or combo? */}
           {visualizationType !== 'Bar' && visualizationType !== 'Paired Bar' && visualizationType !== 'Box Plot' && visualizationType !== 'Area Chart' && visualizationType !== 'Scatter Plot' && visualizationType !== 'Deviation Bar' && visualizationType !== 'Forecasting' && (
@@ -699,6 +728,11 @@ const LinearChart = props => {
               />
               )
             })}
+          {/* we are handling regions in bar charts differently, so that we can calculate the bar group into the region space. */}
+          {/* prettier-ignore */}
+          {config.visualizationType !== 'Bar' && config.visualizationType !== 'Combo' && (
+            <Regions xScale={xScale} handleTooltipClick={handleTooltipClick} handleTooltipMouseOff={handleTooltipMouseOff} handleTooltipMouseOver={handleTooltipMouseOver} showTooltip={showTooltip} hideTooltip={hideTooltip} tooltipData={tooltipData} yMax={yMax} width={width} />
+          )}
           {chartHasTooltipGuides && showTooltip && tooltipData && config.visual.verticalHoverLine && (
             <Group key='tooltipLine-vertical' className='vertical-tooltip-line'>
               <Line from={{ x: tooltipData.dataXPosition - 10, y: 0 }} to={{ x: tooltipData.dataXPosition - 10, y: yMax }} stroke={'black'} strokeWidth={1} pointerEvents='none' strokeDasharray='5,5' className='vertical-tooltip-line' />
@@ -714,8 +748,18 @@ const LinearChart = props => {
               {config.chartMessage.noData}
             </Text>
           )}
+          {config.visualizationType === 'Bar' && config.tooltips.singleSeries && config.visual.horizontalHoverLine && (
+            <Group key='tooltipLine-horizontal' className='horizontal-tooltip-line' left={config.yAxis.size ? config.yAxis.size : 0}>
+              <Line from={{ x: 0, y: point.y }} to={{ x: xMax, y: point.y }} stroke={'black'} strokeWidth={1} pointerEvents='none' strokeDasharray='5,5' className='horizontal-tooltip-line' />
+            </Group>
+          )}
+          {config.visualizationType === 'Bar' && config.tooltips.singleSeries && config.visual.verticalHoverLine && (
+            <Group key='tooltipLine-vertical' className='vertical-tooltip-line'>
+              <Line from={{ x: point.x, y: 0 }} to={{ x: point.x, y: yMax }} stroke={'black'} strokeWidth={1} pointerEvents='none' strokeDasharray='5,5' className='vertical-tooltip-line' />
+            </Group>
+          )}
         </svg>
-        {tooltipData && Object.entries(tooltipData.data).length > 0 && tooltipOpen && showTooltip && tooltipData.dataYPosition && tooltipData.dataXPosition && (
+        {tooltipData && Object.entries(tooltipData.data).length > 0 && tooltipOpen && showTooltip && tooltipData.dataYPosition && tooltipData.dataXPosition && !config.tooltips.singleSeries && (
           <>
             <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}>
@@ -723,9 +767,8 @@ const LinearChart = props => {
             </TooltipWithBounds>
           </>
         )}
-        {(config.orientation === 'horizontal' || config.visualizationType === 'Scatter Plot' || config.visualizationType === 'Box Plot') && (
-          <ReactTooltip id={`cdc-open-viz-tooltip-${runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' style={{ background: `rgba(255,255,255, ${config.tooltips.opacity / 100})`, color: 'black' }} />
-        )}
+
+        {visSupportsReactTooltip() && <ReactTooltip id={`cdc-open-viz-tooltip-${runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' style={{ background: `rgba(255,255,255, ${config.tooltips.opacity / 100})`, color: 'black' }} />}
         <div className='animation-trigger' ref={triggerRef} />
       </div>
     </ErrorBoundary>

package/src/components/PairedBarChart.jsx

@@ -47,11 +47,11 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
   // Set label color
   let labelColor = '#000000'
 
-  if (chroma.contrast(labelColor, groupOne.color) < 4.9) {
+  if (groupOne.color && chroma.contrast(labelColor, groupOne.color) < 4.9) {
     groupOne.labelColor = '#FFFFFF'
   }
 
-  if (chroma.contrast(labelColor, groupTwo.color) < 4.9) {
+  if (groupTwo.color && chroma.contrast(labelColor, groupTwo.color) < 4.9) {
     groupTwo.labelColor = '#FFFFFF'
   }