@cdc/chart 4.22.11 → 4.23.1

package/src/components/Filters.js

@@ -0,0 +1,131 @@
+import React, { useEffect, useState, useContext } from 'react'
+import Context from './../context'
+import Button from '@cdc/core/components/elements/Button'
+
+const useFilters = () => {
+  const { config, setConfig, filteredData, setFilteredData, excludedData, filterData, runtimeFilters } = useContext(Context)
+  const [showApplyButton, setShowApplyButton] = useState(false)
+
+  const sortAsc = (a, b) => {
+    return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
+  }
+
+  const sortDesc = (a, b) => {
+    return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
+  }
+
+  const announceChange = text => {}
+
+  const changeFilterActive = (index, value) => {
+    let newFilters = config.filters
+    newFilters[index].active = value
+    setConfig({
+      ...config,
+      filters: newFilters
+    })
+    setShowApplyButton(true)
+  }
+
+  const handleApplyButton = newFilters => {
+    setConfig({ ...config, filters: newFilters })
+    setFilteredData(filterData(newFilters, excludedData))
+    setShowApplyButton(false)
+  }
+
+  const handleReset = () => {
+    let newFilters = config.filters
+
+    // reset to first item in values array.
+    newFilters.map(filter => {
+      filter.active = filter.values[0]
+    })
+
+    setFilteredData(filterData(newFilters, excludedData))
+    setConfig({ ...config, filters: newFilters })
+  }
+
+  return { handleApplyButton, changeFilterActive, announceChange, sortAsc, sortDesc, showApplyButton, handleReset }
+}
+
+const Filters = () => {
+  const { config } = useContext(Context)
+  const { handleApplyButton, changeFilterActive, announceChange, sortAsc, sortDesc, showApplyButton, handleReset } = useFilters()
+  const { filters } = config
+  const buttonText = 'Apply Filters'
+  const resetText = 'Reset All'
+
+  // A List of Dropdowns
+  const FilterList = () => {
+    if (config.filters) {
+      return config.filters.map((singleFilter, index) => {
+        const values = []
+
+        if (!singleFilter.order || singleFilter.order === '') {
+          singleFilter.order = 'asc'
+        }
+
+        if (singleFilter.order === 'desc') {
+          singleFilter.values = singleFilter.values.sort(sortDesc)
+        }
+
+        if (singleFilter.order === 'asc') {
+          singleFilter.values = singleFilter.values.sort(sortAsc)
+        }
+
+        singleFilter.values.forEach((filterOption, index) => {
+          values.push(
+            <option key={index} value={filterOption}>
+              {filterOption}
+            </option>
+          )
+        })
+
+        return (
+          <div className='single-filter' key={index}>
+            <label htmlFor={`filter-${index}`}>{singleFilter.label}</label>
+            <select
+              id={`filter-${index}`}
+              className='filter-select'
+              data-index='0'
+              value={singleFilter.active}
+              onChange={e => {
+                changeFilterActive(index, e.target.value)
+                announceChange(`Filter ${singleFilter.label} value has been changed to ${e.target.value}, please reference the data table to see updated values.`)
+              }}
+            >
+              {values}
+            </select>
+          </div>
+        )
+      })
+    } else {
+      return null
+    }
+  }
+
+  return (
+    <section className={`filters-section`} style={{ display: 'block', width: '100%' }}>
+      {config.filters.length > 0 && (
+        <>
+          <h3 className='filters-section__title'>Filters</h3>
+          <hr />
+        </>
+      )}
+      <div className='filters-section__wrapper' style={{ flexWrap: 'wrap', display: 'flex', gap: '7px 15px' }}>
+        <FilterList />
+        {config.filters.length > 0 && (
+          <div className='filter-section__buttons' style={{ width: '100%' }}>
+            <Button onClick={() => handleApplyButton(filters)} disabled={!showApplyButton} style={{ marginRight: '10px' }}>
+              {buttonText}
+            </Button>
+            <a href='#!' role='button' onClick={handleReset}>
+              {resetText}
+            </a>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export default Filters

package/src/components/Legend.js

@@ -111,7 +111,14 @@ const Legend = () => {
 
   if (!legend.dynamicLegend)
     return (
-      <aside id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
+      <aside
+        style={{ marginTop: config.legend.position === 'bottom' && config.orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px', marginBottom: config.legend.position === 'bottom' ? '15px' : '0px' }}
+        id='legend'
+        className={containerClasses.join(' ')}
+        role='region'
+        aria-label='legend'
+        tabIndex={0}
+      >
         {legend.label && <h2>{parse(legend.label)}</h2>}
         {legend.description && <p>{parse(legend.description)}</p>}
         <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>

package/src/components/LineChart.tsx

@@ -28,6 +28,14 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
     }
   }
 
+  const handleAxisFormating = (axis = 'left', label, value) => {
+    axis = String(axis).toLocaleLowerCase()
+    if (label) {
+      return `${label}: ${formatNumber(value, axis)}`
+    }
+    return `${formatNumber(value, axis)}`
+  }
+
   return (
     <ErrorBoundary component='LineChart'>
       <Group left={config.runtime.yAxis.size}>
@@ -43,20 +51,26 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
               display={config.legend.behavior === 'highlight' || (seriesHighlight.length === 0 && !config.legend.dynamicLegend) || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
             >
               {data.map((d, dataIndex) => {
-                let seriesAxis = config.series.filter(s => s.dataKey === seriesKey)[0].axis
+                // 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 = formatNumber(getYAxisData(d, seriesKey));
-                let yAxisTooltip = config.runtime.yAxis.isLegendValue ? `${seriesKey}: ${yAxisValue} ` : config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue;
-                let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
-                if (seriesAxis === 'Left') {
-                  yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${formatNumber(getYAxisData(d, seriesKey))}` : formatNumber(getYAxisData(d, seriesKey))
-                } else {
-                  yAxisTooltip = config.runtime.yAxis.rightLabel ? `${config.runtime.yAxis.rightLabel}: ${formatNumber(getYAxisData(d, seriesKey))}` : formatNumber(getYAxisData(d, seriesKey))
-                }
+                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]
+                // if has muiltiple series dont show legend value on tooltip
+                if (!hasMultipleSeries) label = config.isLegendValue ? config.runtime.seriesLabels[seriesKey] : label
+
+                let yAxisTooltip = handleAxisFormating(axis, label, yAxisValue)
+                let xAxisTooltip = handleAxisFormating(axis, config.runtime.xAxis.label, xAxisValue)
+
                 const tooltip = `<div>
+                    ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && Object.keys(config.runtime.seriesLabels).length > 1 ? `${config.runtime.seriesLabels[seriesKey] || ''}<br/>` : ''}
                     ${yAxisTooltip}<br />
-                    ${xAxisTooltip}<br />
-                    ${config.seriesLabel ? `${config.seriesLabel}: ${seriesKey}` : ''}
+                    ${xAxisTooltip}
                   </div>`
                 let circleRadii = 4.5
                 return (
@@ -107,10 +121,47 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                 strokeOpacity={1}
                 shapeRendering='geometricPrecision'
                 strokeDasharray={lineType ? handleLineType(lineType) : 0}
-                defined={(item,i) => {
-                  return item[config.runtime.seriesLabels[seriesKey]] !== "" && item[config.runtime.seriesLabels[seriesKey]] !== null;
+                defined={(item, i) => {
+                  return item[config.runtime.seriesLabels[seriesKey]] !== '' && item[config.runtime.seriesLabels[seriesKey]] !== null
                 }}
               />
+              {config.animate && (
+                <LinePath
+                  className='animation'
+                  curve={allCurves.curveLinear}
+                  data={data}
+                  x={d => xScale(getXAxisData(d))}
+                  y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey)))}
+                  stroke='#fff'
+                  strokeWidth={3}
+                  strokeOpacity={1}
+                  shapeRendering='geometricPrecision'
+                  strokeDasharray={lineType ? handleLineType(lineType) : 0}
+                  defined={(item, i) => {
+                    return item[config.runtime.seriesLabels[seriesKey]] !== '' && item[config.runtime.seriesLabels[seriesKey]] !== null
+                  }}
+                />
+              )}
+
+              {/* Render series labels at end if each line if selected in the editor */}
+              {config.showLineSeriesLabels &&
+                (config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map(seriesKey => {
+                  let lastDatum
+                  for (let i = data.length - 1; i >= 0; i--) {
+                    if (data[i][seriesKey]) {
+                      lastDatum = data[i]
+                      break
+                    }
+                  }
+                  if (!lastDatum) {
+                    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'}>
+                      {config.runtime.seriesLabels[seriesKey] || seriesKey}
+                    </text>
+                  )
+                })}
             </Group>
           )
         })}

package/src/components/LinearChart.tsx

@@ -4,7 +4,7 @@ import ReactTooltip from 'react-tooltip'
 import { Group } from '@visx/group'
 import { Line } from '@visx/shape'
 import { Text } from '@visx/text'
-import { scaleLinear, scalePoint } from '@visx/scale'
+import { scaleLinear, scalePoint, scaleBand } from '@visx/scale'
 import { AxisLeft, AxisBottom, AxisRight, AxisTop } from '@visx/axis'
 
 import BarChart from './BarChart'
@@ -12,31 +12,34 @@ import LineChart from './LineChart'
 import Context from '../context'
 import PairedBarChart from './PairedBarChart'
 import useIntersectionObserver from './useIntersectionObserver'
-import SparkLine from './SparkLine'
+import CoveBoxPlot from './BoxPlot'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import numberFromString from '@cdc/core/helpers/numberFromString'
 import '../scss/LinearChart.scss'
 import useReduceData from '../hooks/useReduceData'
 import useRightAxis from '../hooks/useRightAxis'
 import useTopAxis from '../hooks/useTopAxis'
 
 // TODO: Move scaling functions into hooks to manage complexity
-
-// TODO: remove unused imports/variables
-// TODO: consider moving logic into hooks
-// TODO: formatting
 export default function LinearChart() {
   const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig } = useContext<any>(Context)
   let [width] = dimensions
-  const { minValue, maxValue, existPositiveValue } = useReduceData(config, data)
+  const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, data)
   const [animatedChart, setAnimatedChart] = useState<boolean>(false)
-  const [animatedChartPlayed, setAnimatedChartPlayed] = useState<boolean>(false)
 
   const triggerRef = useRef()
   const dataRef = useIntersectionObserver(triggerRef, {
     freezeOnceVisible: false
   })
+  // Make sure the chart is visible if in the editor
+  useEffect(() => {
+    const element = document.querySelector('.isEditor')
+    if (element) {
+      // parent element is visible
+      setAnimatedChart(prevState => true)
+    }
+  })
+
   // If the chart is in view and set to animate and it has not already played
   useEffect(() => {
     if (dataRef?.isIntersecting === true && config.animate) {
@@ -49,10 +52,10 @@ export default function LinearChart() {
   if (config && config.legend && !config.legend.hide && config.legend.position !== 'bottom' && (currentViewport === 'lg' || currentViewport === 'md')) {
     width = width * 0.73
   }
-
-  const height = config.aspectRatio ? width * config.aspectRatio : config.height
+  const { horizontal: heightHorizontal } = config.heights
+  const height = config.aspectRatio ? width * config.aspectRatio : config.heights[config.orientation]
   const xMax = width - config.runtime.yAxis.size - config.yAxis.rightAxisSize
-  const yMax = height - config.runtime.xAxis.size
+  const yMax = height - (config.orientation === 'horizontal' ? 0 : config.runtime.xAxis.size)
 
   const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data, updateConfig })
   const { hasTopAxis } = useTopAxis(config)
@@ -65,19 +68,29 @@ export default function LinearChart() {
   let seriesScale
 
   const { max: enteredMaxValue, min: enteredMinValue } = config.runtime.yAxis
-  const isMaxValid = existPositiveValue ? numberFromString(enteredMaxValue) >= numberFromString(maxValue) : numberFromString(enteredMaxValue) >= 0
-  const isMinValid = (numberFromString(enteredMinValue) <= 0 && numberFromString(minValue) >= 0) || (numberFromString(enteredMinValue) <= minValue && minValue < 0)
+  const isMaxValid = existPositiveValue ? enteredMaxValue >= maxValue : enteredMaxValue >= 0
+  const isMinValid = (enteredMinValue <= 0 && minValue >= 0) || (enteredMinValue <= minValue && minValue < 0)
 
   if (data) {
     let min = enteredMinValue && isMinValid ? enteredMinValue : minValue
     let max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
 
-    if ((config.visualizationType === 'Bar' || config.visualizationType === 'Combo') && min > 0) {
+    if ((config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && !isAllLine)) && min > 0) {
       min = 0
     }
+    if (config.visualizationType === 'Combo' && isAllLine) {
+      if ((enteredMinValue === undefined || enteredMinValue === null || enteredMinValue === '') && min > 0) {
+        min = 0
+      }
+      if (enteredMinValue) {
+        const isMinValid = +enteredMinValue < minValue
+        min = +enteredMinValue && isMinValid ? enteredMinValue : minValue
+      }
+    }
+
     if (config.visualizationType === 'Line') {
-      const isMinValid = Number(enteredMinValue) < Number(minValue)
-      min = enteredMinValue && isMinValid ? Number(enteredMinValue) : minValue
+      const isMinValid = enteredMinValue < minValue
+      min = enteredMinValue && isMinValid ? enteredMinValue : minValue
     }
     //If data value max wasn't provided, calculate it
     if (max === Number.MIN_VALUE) {
@@ -171,32 +184,72 @@ export default function LinearChart() {
     }
   }
 
-   
-  const countNumOfTicks = (axis)=>{
+  const handleLeftTickFormatting = tick => {
+    if (config.runtime.yAxis.type === 'date') return formatDate(parseDate(tick))
+    if (config.orientation === 'vertical') return formatNumber(tick, 'left')
+    return tick
+  }
+
+  const handleBottomTickFormatting = tick => {
+    if (config.runtime.xAxis.type === 'date') return formatDate(tick)
+    if (config.orientation === 'horizontal') return formatNumber(tick, 'bottom')
+    return tick
+  }
+
+  const countNumOfTicks = axis => {
     // function get number of ticks based on bar type & users value
-    const isHorizontal = config.orientation ==='horizontal';
-    const {numTicks} = config.runtime[axis];
-    let tickCount = undefined;
-
-    if(axis === 'yAxis'){
-      tickCount = (
-         (isHorizontal && !numTicks) ? data.length 
-       : (isHorizontal &&  numTicks) ? numTicks
-       :(!isHorizontal && !numTicks) ? undefined
-       :(!isHorizontal &&  numTicks) && numTicks
-      );
-    };
-
-    if(axis === 'xAxis'){
-      tickCount = (
-         (isHorizontal && !numTicks) ? undefined
-       : (isHorizontal &&  numTicks) ? numTicks
-       :(!isHorizontal && !numTicks) ? undefined
-       :(!isHorizontal &&  numTicks) && numTicks
-      );
-    };
-    return tickCount;
-  };
+    const isHorizontal = config.orientation === 'horizontal'
+    const { numTicks } = config.runtime[axis]
+    let tickCount = undefined
+
+    if (axis === 'yAxis') {
+      tickCount = isHorizontal && !numTicks ? data.length : isHorizontal && numTicks ? numTicks : !isHorizontal && !numTicks ? undefined : !isHorizontal && numTicks && numTicks
+    }
+
+    if (axis === 'xAxis') {
+      tickCount = isHorizontal && !numTicks ? undefined : isHorizontal && numTicks ? numTicks : !isHorizontal && !numTicks ? undefined : !isHorizontal && numTicks && numTicks
+    }
+    return tickCount
+  }
+
+  // Handle Box Plots
+  if (config.visualizationType === 'Box Plot') {
+    let minYValue
+    let maxYValue
+    let allOutliers = []
+    let allLowerBounds = config.boxplot.map(plot => plot.columnMin)
+    let allUpperBounds = config.boxplot.map(plot => plot.columnMax)
+
+    minYValue = Math.min(...allLowerBounds)
+    maxYValue = Math.max(...allUpperBounds)
+
+    const hasOutliers = config.boxplot.map(b => b.columnOutliers.map(outlier => allOutliers.push(outlier)))
+
+    if (hasOutliers) {
+      let outlierMin = Math.min(...allOutliers)
+      let outlierMax = Math.max(...allOutliers)
+
+      // check if outliers exceed standard bounds
+      if (outlierMin < minYValue) minYValue = outlierMin
+      if (outlierMax > maxYValue) maxYValue = outlierMax
+    }
+
+    const seriesNames = data.map(d => d[config.xAxis.dataKey])
+
+    // Set Scales
+    yScale = scaleLinear({
+      range: [yMax, 0],
+      round: true,
+      domain: [minYValue, maxYValue]
+    })
+
+    xScale = scaleBand({
+      range: [0, xMax],
+      round: true,
+      domain: config.boxplot.categories,
+      padding: 0.4
+    })
+  }
 
   useEffect(() => {
     ReactTooltip.rebuild()
@@ -217,7 +270,7 @@ export default function LinearChart() {
               const width = to - from
 
               return (
-                <Group className='regions' left={config.runtime.yAxis.size} key={region.label}>
+                <Group className='regions' left={Number(config.runtime.yAxis.size)} key={region.label}>
                   <path
                     stroke='#333'
                     d={`M${from} -5
@@ -238,22 +291,16 @@ export default function LinearChart() {
 
         {/* Y axis */}
         {config.visualizationType !== 'Spark Line' && (
-          <AxisLeft
-            scale={yScale}
-            left={config.runtime.yAxis.size}
-            label={config.runtime.yAxis.label}
-            stroke='#333'
-            tickFormat={tick => (config.runtime.yAxis.type === 'date' ? formatDate(parseDate(tick)) : config.orientation === 'vertical' ? formatNumber(tick) : tick)}
-            numTicks={countNumOfTicks('yAxis')}
-          >
+          <AxisLeft scale={yScale} left={Number(config.runtime.yAxis.size)} label={config.runtime.yAxis.label} stroke='#333' tickFormat={tick => handleLeftTickFormatting(tick)} numTicks={countNumOfTicks('yAxis')}>
             {props => {
-              const lollipopShapeSize = config.lollipopSize === 'large' ? 14 : config.lollipopSize === 'medium' ? 12 : 10
               const axisCenter = config.runtime.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
-              const belowBarPaddingFromTop = 9
               return (
                 <Group className='left-axis'>
                   {props.ticks.map((tick, i) => {
+                    const minY = props.ticks[0].to.y
+                    const barMinHeight = 15 // 15 is the min height for bars by default
+
                     return (
                       <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
                         {!config.runtime.yAxis.hideTicks && <Line from={tick.from} to={tick.to} stroke={config.yAxis.tickColor} display={config.runtime.horizontal ? 'none' : 'block'} />}
@@ -261,23 +308,22 @@ export default function LinearChart() {
                         {config.runtime.yAxis.gridLines ? <Line from={{ x: tick.from.x + xMax, y: tick.from.y }} to={tick.from} stroke='rgba(0,0,0,0.3)' /> : ''}
 
                         {config.orientation === 'horizontal' && config.visualizationSubType !== 'stacked' && config.yAxis.labelPlacement === 'On Date/Category Axis' && !config.yAxis.hideLabel && (
-                          // 17 is a magic number from the offset in barchart.
-                          <Fragment>
-                            <Text transform={`translate(${tick.to.x - 5}, ${config.isLollipopChart ? tick.from.y : tick.from.y - 17}) rotate(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation : 0})`} verticalAnchor={config.isLollipopChart ? 'middle' : 'middle'} textAnchor={'end'}>
-                              {tick.formattedValue}
-                            </Text>
-                          </Fragment>
+                          <Text
+                            transform={`translate(${tick.to.x - 5}, ${config.isLollipopChart ? tick.to.y - minY : tick.to.y - minY + (Number(config.barHeight * config.series.length) - barMinHeight) / 2}) rotate(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation : 0})`}
+                            verticalAnchor={'start'}
+                            textAnchor={'end'}
+                          >
+                            {tick.formattedValue}
+                          </Text>
                         )}
 
                         {config.orientation === 'horizontal' && config.visualizationSubType === 'stacked' && config.yAxis.labelPlacement === 'On Date/Category Axis' && !config.yAxis.hideLabel && (
-                          // 17 is a magic number from the offset in barchart.
-                          <Text transform={`translate(${tick.to.x - 5}, ${tick.from.y - config.barHeight / 2 - 3}) rotate(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation : 0})`} verticalAnchor={config.isLollipopChart ? 'middle' : 'middle'} textAnchor={'end'}>
+                          <Text transform={`translate(${tick.to.x - 5}, ${tick.to.y - minY + (Number(config.barHeight) - barMinHeight) / 2}) rotate(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation : 0})`} verticalAnchor={'start'} textAnchor={'end'}>
                             {tick.formattedValue}
                           </Text>
                         )}
 
                         {config.orientation === 'horizontal' && config.visualizationType === 'Paired Bar' && !config.yAxis.hideLabel && (
-                          // 17 is a magic number from the offset in barchart.
                           <Text transform={`translate(${-15}, ${tick.from.y}) rotate(-${config.runtime.horizontal ? config.runtime.yAxis.tickRotation : 0})`} verticalAnchor={config.isLollipopChart ? 'middle' : 'middle'} textAnchor={'end'}>
                             {tick.formattedValue}
                           </Text>
@@ -304,7 +350,7 @@ export default function LinearChart() {
                       </Group>
                     )
                   })}
-                  {!config.yAxis.hideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
+                  {!config.yAxis.hideAxis && <Line from={props.axisFromPoint} to={config.runtime.horizontal ? { x: 0, y: Number(heightHorizontal) } : props.axisToPoint} stroke='#000' />}
                   {yScale.domain()[0] < 0 && <Line from={{ x: props.axisFromPoint.x, y: yScale(0) }} to={{ x: xMax, y: yScale(0) }} stroke='#333' />}
                   <Text className='y-label' textAnchor='middle' verticalAnchor='start' transform={`translate(${-1 * config.runtime.yAxis.size}, ${axisCenter}) rotate(-90)`} fontWeight='bold' fill={config.yAxis.labelColor}>
                     {props.label}
@@ -317,7 +363,7 @@ export default function LinearChart() {
 
         {/* Right Axis */}
         {hasRightAxis && (
-          <AxisRight scale={yScaleRight} left={width - config.yAxis.rightAxisSize} label={config.yAxis.rightLabel} tickFormat={tick => formatNumber(tick, 'right')} numTicks={config.runtime.yAxis.rightNumTicks || undefined} labelOffset={45}>
+          <AxisRight scale={yScaleRight} left={Number(width - config.yAxis.rightAxisSize)} label={config.yAxis.rightLabel} tickFormat={tick => formatNumber(tick, 'right')} numTicks={config.runtime.yAxis.rightNumTicks || undefined} labelOffset={45}>
             {props => {
               const axisCenter = config.runtime.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
@@ -351,7 +397,7 @@ export default function LinearChart() {
         {hasTopAxis && config.topAxis.hasLine && (
           <AxisTop
             stroke='#333'
-            left={config.runtime.yAxis.size}
+            left={Number(config.runtime.yAxis.size)}
             scale={xScale}
             hideTicks
             hideZero
@@ -363,16 +409,7 @@ export default function LinearChart() {
 
         {/* X axis */}
         {config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Spark Line' && (
-          <AxisBottom
-            top={yMax}
-            left={config.runtime.yAxis.size}
-            label={config.runtime.xAxis.label}
-            tickFormat={tick => (config.runtime.xAxis.type === 'date' ? formatDate(tick) : config.orientation === 'horizontal' ? formatNumber(tick) : tick)}
-            scale={xScale}
-            stroke='#333'
-            tickStroke='#333'
-            numTicks={countNumOfTicks('xAxis')}
-          >
+          <AxisBottom top={yMax} left={Number(config.runtime.yAxis.size)} label={config.runtime.xAxis.label} tickFormat={handleBottomTickFormatting} scale={xScale} stroke='#333' tickStroke='#333' numTicks={countNumOfTicks('xAxis')}>
             {props => {
               const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2
               return (
@@ -397,7 +434,7 @@ export default function LinearChart() {
                     )
                   })}
                   {!config.xAxis.hideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
-                  <Text x={axisCenter} y={config.runtime.xAxis.size} textAnchor='middle' verticalAnchor='end' fontWeight='bold' fill={config.xAxis.labelColor}>
+                  <Text x={axisCenter} y={config.orientation === 'horizontal' ? config.xAxis.labelOffset : config.xAxis.size} textAnchor='middle' fontWeight='bold' fill={config.xAxis.labelColor}>
                     {props.label}
                   </Text>
                 </Group>
@@ -408,7 +445,7 @@ export default function LinearChart() {
 
         {config.visualizationType === 'Paired Bar' && (
           <>
-            <AxisBottom top={yMax} left={config.runtime.yAxis.size} label={config.runtime.xAxis.label} tickFormat={config.runtime.xAxis.type === 'date' ? formatDate : formatNumber} scale={g1xScale} stroke='#333' tickStroke='#333' numTicks={config.runtime.xAxis.numTicks || undefined}>
+            <AxisBottom top={yMax} left={Number(config.runtime.yAxis.size)} label={config.runtime.xAxis.label} tickFormat={config.runtime.xAxis.type === 'date' ? formatDate : formatNumber} scale={g1xScale} stroke='#333' tickStroke='#333' numTicks={config.runtime.xAxis.numTicks || undefined}>
               {props => {
                 const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2
                 return (
@@ -433,7 +470,7 @@ export default function LinearChart() {
             </AxisBottom>
             <AxisBottom
               top={yMax}
-              left={config.runtime.yAxis.size}
+              left={Number(config.runtime.yAxis.size)}
               label={config.runtime.xAxis.label}
               tickFormat={config.runtime.xAxis.type === 'date' ? formatDate : config.runtime.xAxis.dataKey !== 'Year' ? formatNumber : tick => tick}
               scale={g2xScale}
@@ -462,7 +499,7 @@ export default function LinearChart() {
                       {!config.runtime.yAxis.hideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
                     </Group>
                     <Group>
-                      <Text transform={`translate(${xMax / 2}, ${config.height - yMax + 20}) rotate(-${0})`} verticalAnchor='start' textAnchor={'middle'} stroke='#333'>
+                      <Text transform={`translate(${xMax / 2}, ${yMax + 20}) rotate(-${0})`} verticalAnchor='start' textAnchor={'middle'} stroke='#333'>
                         {config.runtime.xAxis.label}
                       </Text>
                     </Group>
@@ -475,18 +512,20 @@ export default function LinearChart() {
         {config.visualizationType === 'Paired Bar' && <PairedBarChart width={xMax} height={yMax} />}
 
         {/* Bar chart */}
-        {config.visualizationType !== 'Line' && config.visualizationType !== 'Paired Bar' && (
+        {config.visualizationType !== 'Line' && config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Box Plot' && (
           <>
             <BarChart xScale={xScale} yScale={yScale} seriesScale={seriesScale} xMax={xMax} yMax={yMax} getXAxisData={getXAxisData} getYAxisData={getYAxisData} animatedChart={animatedChart} visible={animatedChart} />
           </>
         )}
 
         {/* Line chart */}
-        {config.visualizationType !== 'Bar' && config.visualizationType !== 'Paired Bar' && (
+        {config.visualizationType !== 'Bar' && config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Box Plot' && (
           <>
             <LineChart xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} xMax={xMax} yMax={yMax} seriesStyle={config.series} />
           </>
         )}
+
+        {config.visualizationType === 'Box Plot' && <CoveBoxPlot xScale={xScale} yScale={yScale} />}
       </svg>
       <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} html={true} type='light' arrowColor='rgba(0,0,0,0)' className='tooltip' />
       <div className='animation-trigger' ref={triggerRef} />

package/src/components/PairedBarChart.tsx

@@ -97,7 +97,7 @@ const PairedBarChart: React.FC<PairedBarChartProps> = ({ width, height }) => {
 				`}
         </style>
         <svg id='cdc-visualization__paired-bar-chart' width={width} height={height} viewBox={`0 0 ${width} ${height}`} role='img' tabIndex={0}>
-          <Group top={0} left={config.xAxis.size}>
+          <Group top={0} left={Number(config.xAxis.size)}>
             {data
               .filter(item => config.series[0].dataKey === groupOne.dataKey)
               .map((d, index) => {