@cdc/chart 4.23.3 → 4.23.4

package/src/CdcChart.jsx

@@ -31,7 +31,7 @@ import DataTable from './components/DataTable'
 import defaults from './data/initial-state'
 import EditorPanel from './components/EditorPanel'
 import Loading from '@cdc/core/components/Loading'
-import Filters from './components/Filters'
+import Filters from '@cdc/core/components/Filters'
 import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
 
 // Helpers
@@ -40,11 +40,10 @@ import getViewport from '@cdc/core/helpers/getViewport'
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
 import isNumber from '@cdc/core/helpers/isNumber'
-import cleanData from '@cdc/core/helpers/cleanData'
 
 import './scss/main.scss'
 
-export default function CdcChart({ configUrl, config: configObj, isEditor = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname, link }) {
+export default function CdcChart({ configUrl, config: configObj, isEditor = false, isDebug = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname, link }) {
   const transform = new DataTransform()
   const [loading, setLoading] = useState(true)
   const [colorScale, setColorScale] = useState(null)
@@ -84,7 +83,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   }
 
   const handleChartAriaLabels = (state, testing = false) => {
-    if (testing) console.log(`handleChartAriaLabels Testing On:`, state)
+    if (testing) console.log(`handleChartAriaLabels Testing On:`, state) // eslint-disable-line
     try {
       if (!state.visualizationType) throw Error('handleChartAriaLabels: no visualization type found in state')
       let ariaLabel = ''
@@ -144,7 +143,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
           data = await fetch(response.dataUrl + `?v=${cacheBustingString()}`).then(response => response.json())
         }
       } catch {
-        console.error(`COVE: Cannot parse URL: ${response.dataUrl}`)
+        console.error(`COVE: Cannot parse URL: ${response.dataUrl}`) // eslint-disable-line
         data = []
       }
 
@@ -164,6 +163,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       newConfig.legend.hide = true
     }
     if (undefined === newConfig.table.show) newConfig.table.show = !isDashboard
+
     updateConfig(newConfig, data)
   }
 
@@ -220,6 +220,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         newConfig.filters[index].values = filterValues
         // Initial filter should be active
         newConfig.filters[index].active = filterValues[0]
+        newConfig.filters[index].filterStyle = newConfig.filters[index].filterStyle ? newConfig.filters[index].filterStyle : 'dropdown'
       })
       currentData = filterData(newConfig.filters, newExcludedData)
       setFilteredData(currentData)
@@ -258,6 +259,37 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       let tableData = []
       const plots = []
 
+      /**
+       * Calculates the first quartile (q1) and third quartile (q3) from an array of integers or decimals.
+       *
+       * @param {Array} arr - The array of integers or decimals.
+       * @returns {Object} An object containing the q1 and q3 values.
+       */
+      const getQuartiles = arr => {
+        arr.sort((a, b) => a - b)
+
+        // Calculate the index of the median value of the array
+        const medianIndex = Math.floor(arr.length / 2)
+
+        // Check if the length of the array is even or odd
+        const isEvenLength = arr.length % 2 === 0
+
+        // Split the array into two subarrays based on the median index
+        const q1Array = isEvenLength ? arr.slice(0, medianIndex) : arr.slice(0, medianIndex + 1)
+        const q3Array = isEvenLength ? arr.slice(medianIndex) : arr.slice(medianIndex + 1)
+
+        // Calculate the median of the first subarray to get the q1 value
+        const q1Index = Math.floor(q1Array.length / 2)
+        const q1 = isEvenLength ? (q1Array[q1Index - 1] + q1Array[q1Index]) / 2 : q1Array[q1Index]
+
+        // Calculate the median of the second subarray to get the q3 value
+        const q3Index = Math.floor(q3Array.length / 2)
+        const q3 = isEvenLength ? (q3Array[q3Index - 1] + q3Array[q3Index]) / 2 : q3Array[q3Index]
+
+        // Return an object containing the q1 and q3 values
+        return { q1, q3 }
+      }
+
       // group specific statistics
       // prevent re-renders
       if (!groups) return
@@ -268,10 +300,16 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
           // filter data by group
           let filteredData = newExcludedData ? newExcludedData.filter(item => item[newConfig.xAxis.dataKey] === g) : data.filter(item => item[newConfig.xAxis.dataKey] === g)
           let filteredDataValues = filteredData.map(item => Number(item[newConfig?.series[0]?.dataKey]))
-          // let filteredDataValues = filteredData.map(item => Number(item[newConfig.yAxis.dataKey]))
+
+          // Sort the data for upcoming functions.
+          let sortedData = filteredDataValues.sort((a, b) => a - b)
+
+          // ! - Notice d3.quantile doesn't work here, and we had to take a custom route.
+          const quartiles = getQuartiles(sortedData)
 
           if (!filteredData) throw new Error('boxplots dont have data yet')
           if (!plots) throw new Error('boxplots dont have plots yet')
+
           if (newConfig.boxplot.firstQuartilePercentage === '') {
             newConfig.boxplot.firstQuartilePercentage = 0
           }
@@ -280,27 +318,30 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             newConfig.boxplot.thirdQuartilePercentage = 0
           }
 
-          const q1 = d3.quantile(filteredDataValues, parseFloat(newConfig.boxplot.firstQuartilePercentage) / 100)
-          const q3 = d3.quantile(filteredDataValues, parseFloat(newConfig.boxplot.thirdQuartilePercentage) / 100)
+          const q1 = quartiles.q1
+          const q3 = quartiles.q3
           const iqr = q3 - q1
           const lowerBounds = q1 - (q3 - q1) * 1.5
           const upperBounds = q3 + (q3 - q1) * 1.5
-          const outliers = filteredDataValues.filter(v => v < lowerBounds || v > upperBounds)
+
+          const outliers = sortedData.filter(v => v < lowerBounds || v > upperBounds)
           let nonOutliers = filteredDataValues
 
           nonOutliers = nonOutliers.filter(item => !outliers.includes(item))
 
           plots.push({
             columnCategory: g,
-            columnMax: Number(q3 + 1.5 * iqr).toFixed(newConfig.dataFormat.roundTo),
+            columnMax: d3.min([d3.max(filteredDataValues), q1 + 1.5 * iqr]),
             columnThirdQuartile: Number(q3).toFixed(newConfig.dataFormat.roundTo),
             columnMedian: Number(d3.median(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
             columnFirstQuartile: q1.toFixed(newConfig.dataFormat.roundTo),
-            columnMin: Number(q1 - 1.5 * iqr).toFixed(newConfig.dataFormat.roundTo),
+            columnMin: d3.max([d3.min(filteredDataValues), q1 - 1.5 * iqr]),
             columnTotal: filteredDataValues.reduce((partialSum, a) => partialSum + a, 0),
             columnSd: Number(d3.deviation(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
             columnMean: Number(d3.mean(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
             columnIqr: Number(iqr).toFixed(newConfig.dataFormat.roundTo),
+            columnLowerBounds: d3.max([d3.min(filteredDataValues), q1 - 1.5 * iqr]),
+            columnUpperBounds: d3.min([d3.max(sortedData), q1 + 1.5 * iqr]),
             columnOutliers: outliers,
             values: filteredDataValues,
             nonOutlierValues: nonOutliers
@@ -316,6 +357,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       tableData.map(table => {
         delete table.columnIqr
         delete table.nonOutlierValues
+        delete table.columnLowerBounds
+        delete table.columnUpperBounds
         return null // resolve eslint
       })
 
@@ -329,7 +372,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     if (newConfig.visualizationType === 'Combo' && newConfig.series) {
       newConfig.runtime.barSeriesKeys = []
       newConfig.runtime.lineSeriesKeys = []
+      newConfig.runtime.areaSeriesKeys = []
+
       newConfig.series.forEach(series => {
+        if (series.type === 'Area Chart') {
+          newConfig.runtime.areaSeriesKeys.push(series)
+        }
         if (series.type === 'Bar') {
           newConfig.runtime.barSeriesKeys.push(series.dataKey)
         }
@@ -338,6 +386,15 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         }
       })
     }
+    if (newConfig.visualizationType === 'Area Chart' && newConfig.series) {
+      newConfig.runtime.areaSeriesKeys = []
+
+      newConfig.series.forEach(series => {
+        if (series.type === 'Area Chart') {
+          newConfig.runtime.areaSeriesKeys.push(series)
+        }
+      })
+    }
 
     if (((newConfig.visualizationType === 'Bar' || newConfig.visualizationType === 'Deviation Bar') && newConfig.orientation === 'horizontal') || newConfig.visualizationType === 'Paired Bar') {
       newConfig.runtime.xAxis = newConfig.yAxis
@@ -370,7 +427,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return filteredData
   }
 
-  // Gets filer values from dataset
+  // Gets filter values from dataset
   const generateValuesForFilter = (columnName, data = this.state.data) => {
     const values = []
 
@@ -599,8 +656,26 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return Math.ceil(context.measureText(text).width)
   }
 
+  const abbreviateNumber = num => {
+    let unit = ''
+    let absNum = Math.abs(num)
+
+    if (absNum >= 1e9) {
+      unit = 'B'
+      num = num / 1e9
+    } else if (absNum >= 1e6) {
+      unit = 'M'
+      num = num / 1e6
+    } else if (absNum >= 1e3) {
+      unit = 'K'
+      num = num / 1e3
+    }
+
+    return num + unit
+  }
+
   // Format numeric data based on settings in config
-  const formatNumber = (num, axis) => {
+  const formatNumber = (num, axis, shouldAbbreviate = false) => {
     // if num is NaN return num
     if (isNaN(num) || !num) return num
     // Check if the input number is negative
@@ -616,8 +691,6 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       dataFormat: { commas, abbreviated, roundTo, prefix, suffix, rightRoundTo, bottomRoundTo, rightPrefix, rightSuffix, bottomPrefix, bottomSuffix, bottomAbbreviated }
     } = config
 
-    let formatSuffix = format('.2s')
-
     // check if value contains comma and remove it. later will add comma below.
     if (String(num).indexOf(',') !== -1) num = num.replaceAll(',', '')
 
@@ -670,19 +743,20 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     //
     // Edge case for small numbers with decimals
     // - if roundTo undefined which means it is blank, then do not round
-    if ((axis === 'left' && commas && abbreviated) || (axis === 'bottom' && commas && abbreviated)) {
+
+    if ((axis === 'left' && commas && abbreviated && shouldAbbreviate) || (axis === 'bottom' && commas && abbreviated && shouldAbbreviate)) {
       num = num // eslint-disable-line
     } else {
       num = num.toLocaleString('en-US', stringFormattingOptions)
     }
     let result = ''
 
-    if (abbreviated && axis === 'left') {
-      num = formatSuffix(parseFloat(num)).replace('G', 'B')
+    if (abbreviated && axis === 'left' && shouldAbbreviate) {
+      num = abbreviateNumber(parseFloat(num))
     }
 
-    if (bottomAbbreviated && axis === 'bottom') {
-      num = formatSuffix(parseFloat(num)).replace('G', 'B')
+    if (bottomAbbreviated && axis === 'bottom' && shouldAbbreviate) {
+      num = abbreviateNumber(parseFloat(num))
     }
 
     if (prefix && axis === 'left') {
@@ -748,10 +822,19 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return false
   }
 
+  const clean = data => {
+    return config?.xAxis?.dataKey ? transform.cleanData(data, config.xAxis.dataKey) : data
+  }
+
   // Prevent render if loading
   let body = <Loading />
 
   if (!loading) {
+    const tableLink = (
+      <a href={`#data-table-${config.dataKey}`} className='margin-left-href'>
+        {config.dataKey} (Go to Table)
+      </a>
+    )
     body = (
       <>
         {isEditor && <EditorPanel />}
@@ -769,11 +852,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
               Skip Over Chart Container
             </a>
             {/* Filters */}
-            {config.filters && !externalFilters && <Filters />}
+            {config.filters && !externalFilters && <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} isNumber={isNumber} dimensions={dimensions} />}
             {/* Visualization */}
             {config?.introText && <section className='introText'>{parse(config.introText)}</section>}
             <div
-              style={{ marginBottom: config.legend.position !== 'bottom' && currentViewport !== 'sm' && currentViewport !== 'xs' && config.orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px' }}
+              style={{ marginBottom: config.legend.position !== 'bottom' && config.orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px' }}
               className={`chart-container  ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}
             >
               {/* All charts except sparkline */}
@@ -797,7 +880,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
               {!config.legend.hide && config.visualizationType !== 'Spark Line' && <Legend />}
             </div>
             {/* Link */}
-            {link && link}
+            {isDashboard && config.table && config.table.show && config.table.showDataTableLink ? tableLink : link && link}
+
             {/* Description */}
             {description && config.visualizationType !== 'Spark Line' && <div className='subtext'>{parse(description)}</div>}
 
@@ -827,7 +911,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     setConfig,
     rawData: stateData ?? {},
     excludedData: excludedData,
-    transformedData: filteredData || excludedData,
+    transformedData: clean(filteredData || excludedData), // do this right before passing to components
+    tableData: filteredData || excludedData, // do not clean table data
     unfilteredData: stateData,
     seriesHighlight,
     colorScale,
@@ -855,9 +940,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     imageId,
     handleLineType,
     isNumber,
-    cleanData,
     getTextWidth,
-    twoColorPalette
+    twoColorPalette,
+    isDebug
   }
 
   const classes = ['cdc-open-viz-module', 'type-chart', `${currentViewport}`, `font-${config.fontSize}`, `${config.theme}`]

package/src/components/AreaChart.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useCallback } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 
 // cdc
 import ConfigContext from '../ConfigContext'
@@ -6,26 +6,29 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 
 // visx & d3
+import * as allCurves from '@visx/curve'
 import { AreaClosed, LinePath, Bar } from '@visx/shape'
 import { Group } from '@visx/group'
-import * as allCurves from '@visx/curve'
-import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip'
+import { useTooltip, useTooltipInPortal, defaultStyles, Tooltip } from '@visx/tooltip'
 import { localPoint } from '@visx/event'
 import { bisector } from 'd3-array'
 
-const CoveAreaChart = ({ xScale, yScale, yMax, xMax }) => {
+const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
   // enable various console logs in the file
   const DEBUG = false
+  const [chartPosition, setChartPosition] = useState(null)
+
+  useEffect(() => {
+    setChartPosition(chartRef.current.getBoundingClientRect())
+  }, [chartRef])
 
   // import data from context
-  const { transformedData: data, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight } = useContext(ConfigContext)
+  const { transformedData: data, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight, colorScale } = useContext(ConfigContext)
+  const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
 
   // import tooltip helpers
   const { tooltipData, showTooltip } = useTooltip()
 
-  // used for offset on tooltip hover
-  let isEditor = window.location.href.includes('editor=true')
-
   // here we're inside of the svg,
   // it appears we need to use TooltipInPortal.
   const { TooltipInPortal } = useTooltipInPortal({
@@ -36,7 +39,8 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax }) => {
 
   // Draw transparent bars over the chart to get tooltip data
   // Turn DEBUG on for additional context.
-  let barThickness = xMax / config.data.length
+  if (!data) return
+  let barThickness = xMax / data
   let barThicknessAdjusted = barThickness * (config.barThickness || 0.8)
   let offset = (barThickness * (1 - (config.barThickness || 0.8))) / 2
 
@@ -51,6 +55,8 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax }) => {
 
     if (config.xAxis.type === 'date') {
       const bisectDate = bisector(d => parseDate(d[config.xAxis.dataKey])).left
+      if (!x) return
+      if (!xScale) return
       const x0 = xScale.invert(x)
       const index = bisectDate(config.data, x0, 1)
       const val = parseDate(config.data[index - 1][config.xAxis.dataKey])
@@ -58,51 +64,55 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax }) => {
     }
   }
 
-  const handleMouseOver = useCallback(
-    (e, data) => {
-      // get the svg coordinates of the mouse
-      // and get the closest values
-      const eventSvgCoords = localPoint(e)
-      const { x, y } = eventSvgCoords
-
-      let closestXScaleValue = getXValueFromCoordinate(x)
-      let formattedDate = formatDate(closestXScaleValue)
-
-      let yScaleValues
-      if (config.xAxis.type === 'categorical') {
-        yScaleValues = data.filter(d => d[config.xAxis.dataKey] === closestXScaleValue)
-      } else {
-        yScaleValues = data.filter(d => d[config.xAxis.dataKey] === formattedDate)
-      }
-
-      let seriesToInclude = []
-      let yScaleMaxValues = []
-      let itemsToLoop = [config.runtime.xAxis.dataKey, ...config.runtime.seriesKeys]
+  const handleMouseOver = (e, data) => {
+    // get the svg coordinates of the mouse
+    // and get the closest values
+    const eventSvgCoords = localPoint(e)
+    const { x, y } = eventSvgCoords
 
-      itemsToLoop.map(seriesKey => {
-        return Object.entries(yScaleValues[0]).forEach(item => item[0] === seriesKey && seriesToInclude.push(item))
-      })
+    let closestXScaleValue = getXValueFromCoordinate(x)
+    let formattedDate = formatDate(closestXScaleValue)
 
-      // filter out the series that aren't added to the map.
-      seriesToInclude.map(series => yScaleMaxValues.push(Number(yScaleValues[0][series])))
-      seriesToInclude = Object.fromEntries(seriesToInclude)
-
-      let tooltipData = {}
-      tooltipData.data = seriesToInclude
-      tooltipData.dataXPosition = isEditor ? 300 + x + 20 : x + 20
-      tooltipData.dataYPosition = y - 20
+    let yScaleValues
+    if (config.xAxis.type === 'categorical') {
+      yScaleValues = data.filter(d => d[config.xAxis.dataKey] === closestXScaleValue)
+    } else {
+      yScaleValues = data.filter(d => formatDate(parseDate(d[config.xAxis.dataKey])) === formattedDate)
+    }
 
-      let tooltipInformation = {
-        tooltipData: tooltipData,
-        tooltipTop: 0,
-        tooltipValues: yScaleValues,
-        tooltipLeft: x
+    let seriesToInclude = []
+    let yScaleMaxValues = []
+    let itemsToLoop = [config.runtime.xAxis.dataKey, ...config.runtime.seriesKeys]
+
+    itemsToLoop.map(seriesKey => {
+      if (!seriesKey) return
+      if (!yScaleValues[0]) return
+      for (const item of Object.entries(yScaleValues[0])) {
+        if (item[0] === seriesKey) {
+          seriesToInclude.push(item)
+        }
       }
+    })
+
+    // filter out the series that aren't added to the map.
+    seriesToInclude.map(series => yScaleMaxValues.push(Number(yScaleValues[0][series])))
+    if (!seriesToInclude) return
+    let tooltipDataFromSeries = Object.fromEntries(seriesToInclude) ? Object.fromEntries(seriesToInclude) : {}
+
+    let tooltipData = {}
+    tooltipData.data = tooltipDataFromSeries
+    tooltipData.dataXPosition = x + 20
+    tooltipData.dataYPosition = y - 100
+
+    let tooltipInformation = {
+      tooltipData: tooltipData,
+      tooltipTop: 0,
+      tooltipValues: yScaleValues,
+      tooltipLeft: x
+    }
 
-      showTooltip(tooltipInformation)
-    },
-    [showTooltip] // eslint-disable-line
-  )
+    showTooltip(tooltipInformation)
+  }
 
   const TooltipListItem = ({ item }) => {
     const [label, value] = item
@@ -120,8 +130,8 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax }) => {
   return (
     data && (
       <ErrorBoundary component='AreaChart'>
-        <Group className='area-chart' key='area-wrapper' left={config.yAxis.size}>
-          {config.series.map((s, index) => {
+        <Group className='area-chart' key='area-wrapper' left={Number(config.yAxis.size)}>
+          {(config.runtime.areaSeriesKeys || config.runtime.seriesKeys).map((s, index) => {
             let seriesColor = colorPalettesChart[config.palette][index]
             let curveType = allCurves[s.lineType]
             let transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(s.dataKey) === -1
@@ -130,16 +140,42 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax }) => {
             data.map(d => xScale(parseDate(d[config.xAxis.dataKey])))
 
             return (
-              <>
+              <React.Fragment key={index}>
                 {/* prettier-ignore */}
-                {/* this is the line that appears on top of the area chart */}
-                <LinePath data={data} x={d => handleX(d)} y={d => yScale(d[config.series[index].dataKey])} stroke={seriesColor} strokeWidth={2} strokeOpacity={1} shapeRendering='geometricPrecision' curve={curveType} strokeDasharray={s.type ? handleLineType(s.type) : 0} />
+                <LinePath
+                  data={data}
+                  x={d => handleX(d)}
+                  y={d => yScale(d[config.series[index].dataKey])}
+                  stroke={displayArea ? seriesColor : 'transparent'}
+                  strokeWidth={2}
+                  strokeOpacity={1}
+                  shapeRendering='geometricPrecision'
+                  curve={curveType}
+                  strokeDasharray={s.type ? handleLineType(s.type) : 0}
+                />
 
                 {/* prettier-ignore */}
-                {/* filled in sections */}
-                <AreaClosed key={'area-chart'} fill={displayArea ? seriesColor : 'transparent'} fillOpacity={transparentArea ? 0.25 : 0.5} data={data} x={d => handleX(d)} y={d => handleY(d, index)} yScale={yScale} curve={curveType} strokeDasharray={s.type ? handleLineType(s.typ) : 0} />
+                <AreaClosed
+                  key={'area-chart'}
+                  fill={ displayArea ? colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
+                  fillOpacity={transparentArea ? 0.25 : 0.5}
+                  data={data} x={d => handleX(d)}
+                  y={d => handleY(d, index)}
+                  yScale={yScale}
+                  curve={curveType}
+                  strokeDasharray={s.type ? handleLineType(s.typ) : 0}
+                  />
 
-                <Bar x={d => handleX(d)} y={d => yScale(d[config.series[index].dataKey])} yScale={yScale} width={xMax} height={yMax} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} style={DEBUG ? { stroke: 'black', strokeWidth: 2 } : {}} onMouseMove={e => handleMouseOver(e, data)} />
+                {/* Transparent bar for tooltips */}
+                {/* prettier-ignore */}
+                <Bar
+                  width={ Number(xMax)}
+                  height={ Number(yMax)}
+                  fill={DEBUG ? 'red' : 'transparent'}
+                  fillOpacity={0.05}
+                  style={DEBUG ? { stroke: 'black', strokeWidth: 2 } : {}}
+                  onMouseMove={e => handleMouseOver(e, data)}
+                  />
 
                 {/* circles that appear on hover */}
                 {tooltipData && (
@@ -149,19 +185,19 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax }) => {
                     r={4.5}
                     opacity={1}
                     fillOpacity={1}
-                    fill={seriesColor}
+                    fill={displayArea ? (colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000') : 'transparent'}
                     style={{ filter: 'unset', opacity: 1 }}
                   />
                 )}
 
-                {/* bars to handle tooltips */}
+                {/* another tool for showing bars during debug mode. */}
                 {DEBUG &&
-                  config.data.map((item, index) => {
+                  data.map((item, index) => {
                     return (
                       <Bar
                         className='bar-here'
-                        x={barThickness * index + offset}
-                        y={d => yScale(d[config.series[index].dataKey])}
+                        x={Number(barThickness * index + offset)}
+                        y={d => Number(yScale(d[config.series[index].dataKey]))}
                         yScale={yScale}
                         width={barThicknessAdjusted}
                         height={yMax}
@@ -174,19 +210,18 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax }) => {
                   })}
 
                 {tooltipData && (
-                  <TooltipInPortal key={Math.random()} top={tooltipData.dataYPosition} left={tooltipData.dataXPosition} style={defaultStyles}>
-                    <Group x={config.yAxis.size + 10} y={0}>
-                      <ul style={{ listStyle: 'none', paddingLeft: 'unset' }}>
-                        {Object.entries(tooltipData.data).map(item => (
-                          <li>
+                  <TooltipInPortal key={Math.random()} top={tooltipData.dataYPosition + chartPosition?.top} left={tooltipData.dataXPosition + chartPosition?.left} style={defaultStyles}>
+                    <ul style={{ listStyle: 'none', paddingLeft: 'unset', fontFamily: 'sans-serif', margin: 'auto', lineHeight: '1rem' }} data-tooltip-id={tooltip_id}>
+                      {typeof tooltipData === 'object' &&
+                        Object.entries(tooltipData.data).map(item => (
+                          <li style={{ padding: '2.5px 0' }}>
                             <TooltipListItem item={item} />
                           </li>
                         ))}
-                      </ul>
-                    </Group>
+                    </ul>
                   </TooltipInPortal>
                 )}
-              </>
+              </React.Fragment>
             )
           })}
         </Group>