@cdc/chart 4.25.1 → 4.25.3-6

package/src/CdcChartComponent.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect, useCallback, useRef, useId, useContext } from 'react'
+import React, { useState, useEffect, useCallback, useRef, useId, useContext, useReducer } from 'react'
 
 // IE11
 import ResizeObserver from 'resize-observer-polyfill'
 import 'whatwg-fetch'
 // Core components
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import Layout from '@cdc/core/components/Layout'
 import Confirm from '@cdc/core/components/elements/Confirm'
 import Error from '@cdc/core/components/elements/Error'
@@ -13,11 +14,9 @@ import DataTable from '@cdc/core/components/DataTable'
 // Local Components
 import LegendWrapper from './components/LegendWrapper'
 //types
-import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { type DashboardConfig } from '@cdc/dashboard/src/types/DashboardConfig'
 import type { TableConfig } from '@cdc/core/components/DataTable/types/TableConfig'
 import { AllChartsConfig, ChartConfig } from './types/ChartConfig'
-import { type ViewportSize } from './types/ChartConfig'
 import { Pivot } from '@cdc/core/types/Table'
 import { Runtime } from '@cdc/core/types/Runtime'
 import { Label } from './types/Label'
@@ -28,7 +27,7 @@ import parse from 'html-react-parser'
 import 'react-tooltip/dist/react-tooltip.css'
 import _ from 'lodash'
 // Primary Components
-import ConfigContext from './ConfigContext'
+import ConfigContext, { ChartDispatchContext } from './ConfigContext'
 import PieChart from './components/PieChart'
 import SankeyChart from './components/Sankey'
 import LinearChart from './components/LinearChart'
@@ -73,6 +72,7 @@ import { getExcludedData } from './helpers/getExcludedData'
 import { getColorScale } from './helpers/getColorScale'
 // styles
 import './scss/main.scss'
+import { getInitialState, reducer } from './store/chart.reducer'
 
 interface CdcChartProps {
   config?: ChartConfig
@@ -100,44 +100,44 @@ const CdcChart: React.FC<CdcChartProps> = ({
   dashboardConfig
 }) => {
   const transform = new DataTransform()
-  const [loading, setLoading] = useState(true)
+  const initialState = getInitialState(configObj)
+  const [state, dispatch] = useReducer(reducer, initialState)
+  const {
+    config,
+    stateData,
+    excludedData,
+    filteredData,
+    currentViewport,
+    isLoading,
+    dimensions,
+    container,
+    coveLoadedEventRan,
+    imageId,
+    seriesHighlight,
+    colorScale,
+    brushConfig
+  } = state
+  const { description, visualizationType } = config
   const svgRef = useRef(null)
-  const [colorScale, setColorScale] = useState(null)
-  const [config, _setConfig] = useState<ChartConfig>({} as ChartConfig)
-  const [stateData, setStateData] = useState(_.cloneDeep(configObj?.data) || [])
-  const [excludedData, setExcludedData] = useState<Record<string, number>[] | undefined>(undefined)
-  const [filteredData, setFilteredData] = useState<Record<string, any>[] | undefined>(undefined)
-  const [seriesHighlight, setSeriesHighlight] = useState<string[]>(
-    configObj && configObj?.legend?.seriesHighlight?.length ? [...configObj?.legend?.seriesHighlight] : []
-  )
-  const [currentViewport, setCurrentViewport] = useState<ViewportSize>('lg')
-  const [dimensions, setDimensions] = useState<DimensionsType>([0, 0])
-  const [externalFilters, setExternalFilters] = useState<any[]>()
-  const [container, setContainer] = useState()
-  const [coveLoadedEventRan, setCoveLoadedEventRan] = useState(false)
-  const [isDraggingAnnotation, setIsDraggingAnnotation] = useState(false)
-  const [dynamicLegendItems, setDynamicLegendItems] = useState<any[]>([])
-  const [imageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
-  const [brushConfig, setBrushConfig] = useState({
-    data: [],
-    isActive: false,
-    isBrushing: false
-  })
   const editorContext = useContext(EditorContext)
-  const setConfig = newConfig => {
-    _setConfig(newConfig)
+  const [externalFilters, setExternalFilters] = useState<any[]>()
+
+  const setConfig = (newConfig: ChartConfig): void => {
+    dispatch({ type: 'SET_CONFIG', payload: newConfig })
     if (isEditor && !isDashboard) {
       editorContext.setTempConfig(newConfig)
     }
   }
 
-  const { description, visualizationType } = config
+  const setFiltersData = (filteredData: object[]): void => {
+    dispatch({ type: 'SET_FILTERED_DATA', payload: filteredData })
+  }
 
   const legendRef = useRef(null)
   const parentRef = useRef(null)
 
   const handleDragStateChange = isDragging => {
-    setIsDraggingAnnotation(isDragging)
+    dispatch({ type: 'SET_DRAG_ANNOTATIONS', payload: isDragging })
   }
 
   if (isDebug) console.log('Chart config, isEditor', config, isEditor)
@@ -159,11 +159,9 @@ const CdcChart: React.FC<CdcChartProps> = ({
     (config.xAxis || config.yAxis) && ['date-time', 'date'].includes((config.xAxis || config.yAxis).type)
   const dataTableDefaultSortBy = hasDateAxis && config.xAxis.dataKey
 
-  const checkLineToBarGraph = () => {
-    return isConvertLineToBarGraph(config.visualizationType, filteredData, config.allowLineToBarGraph)
-  }
+  const convertLineToBarGraph = isConvertLineToBarGraph(config, filteredData)
 
-  const prepareConfig = (loadedConfig: ChartConfig, data): ChartConfig => {
+  const prepareConfig = async (loadedConfig: ChartConfig) => {
     let newConfig = _.defaultsDeep(loadedConfig, defaults)
     _.defaultsDeep(newConfig, {
       table: { showVertical: false }
@@ -199,15 +197,14 @@ const CdcChart: React.FC<CdcChartProps> = ({
     })
 
     const newExcludedData: any[] = getExcludedData(newConfig, dataOverride || stateData)
-
-    setExcludedData(newExcludedData)
+    dispatch({ type: 'SET_EXCLUDED_DATA', payload: newExcludedData })
 
     // After data is grabbed, loop through and generate filter column values if there are any
     let currentData: any[] = []
     if (newConfig.filters) {
       const filtersWithValues = addValuesToFilters(newConfig.filters, newExcludedData)
       currentData = filterVizData(filtersWithValues, newExcludedData)
-      setFilteredData(currentData)
+      dispatch({ type: 'SET_FILTERED_DATA', payload: currentData })
     }
 
     if (newConfig.xAxis.type === 'date-time' && config.orientation === 'horizontal') {
@@ -297,7 +294,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
       newConfig.yAxis.type = newConfig.yAxis.type === 'categorical' ? 'linear' : newConfig.yAxis.type
     } else if (
       ['Box Plot', 'Scatter Plot', 'Area Chart', 'Line', 'Forecasting'].includes(newConfig.visualizationType) &&
-      !checkLineToBarGraph()
+      !convertLineToBarGraph
     ) {
       newConfig.runtime.xAxis = newConfig.xAxis
       newConfig.runtime.yAxis = newConfig.yAxis
@@ -319,7 +316,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     newConfig.runtime.editorErrorMessage = ''
 
     if (newConfig.legend.seriesHighlight?.length) {
-      setSeriesHighlight(newConfig.legend?.seriesHighlight)
+      dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: newConfig.legend?.seriesHighlight })
     }
 
     setConfig(newConfig)
@@ -354,15 +351,14 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
       const newViewport = getViewport(width)
 
-      setCurrentViewport(newViewport)
+      dispatch({ type: 'SET_VIEWPORT', payload: newViewport })
 
       if (entry.target.dataset.lollipop === 'true') {
         width = width - 2.5
       }
 
       width = width - svgMarginWidth
-
-      setDimensions([width, height])
+      dispatch({ type: 'SET_DIMENSIONS', payload: [width, height] })
     }
   })
 
@@ -370,32 +366,51 @@ const CdcChart: React.FC<CdcChartProps> = ({
     if (node !== null) {
       resizeObserver.observe(node)
     }
-
-    setContainer(node)
+    dispatch({ type: 'SET_CONTAINER', payload: node })
   }, []) // eslint-disable-line
 
-  // Load data when component first mounts
+  const prepareData = async newConfig => {
+    try {
+      const urlFilters = newConfig.filters
+        ? newConfig.filters.filter(filter => filter.type === 'url').length > 0
+          ? true
+          : false
+        : false
+
+      if (newConfig.dataUrl && !urlFilters) {
+        // handle urls with spaces in the name.
+        if (newConfig.dataUrl) newConfig.dataUrl = `${newConfig.dataUrl}`
+        let newData = await fetchRemoteData(newConfig.dataUrl, 'Chart')
+
+        if (newData && newConfig.dataDescription) {
+          newData = transform.autoStandardize(newData)
+          newData = transform.developerStandardize(newData, newConfig.dataDescription)
+        }
 
-  const prepareData = (config, data) => {
-    if (config.dataDescription) {
-      data = transform.autoStandardize(data)
-      data = transform.developerStandardize(data, config.dataDescription)
+        if (newData) {
+          newConfig.data = newData
+        }
+      } else if (newConfig.formattedData) {
+        newConfig.data = newConfig.formattedData
+      } else if (newConfig.dataDescription) {
+        newConfig.data = transform.autoStandardize(newConfig.data)
+        newConfig.data = transform.developerStandardize(newConfig.data, newConfig.dataDescription)
+      }
+    } catch (err) {
+      console.log('Error on prepareData function ', err)
     }
-
-    data = handleRankByValue(data, config)
-
-    return data
+    return newConfig
   }
+
   useEffect(() => {
     const load = async () => {
       try {
-        const data = configObj.data
-        if (configObj.data && configObj) {
-          const preparedConfig = await prepareConfig(configObj, data)
-          const preparedData = prepareData(configObj, data)
-          setStateData(preparedData)
-          setExcludedData(preparedData)
-          updateConfig(preparedConfig, preparedData)
+        if (configObj) {
+          const preparedConfig = await prepareConfig(configObj)
+          let preppedData = await prepareData(preparedConfig)
+          dispatch({ type: 'SET_STATE_DATA', payload: preppedData.data })
+          dispatch({ type: 'SET_EXCLUDED_DATA', payload: preppedData.data })
+          updateConfig(preparedConfig, preppedData.data)
         }
       } catch (err) {
         console.error('Could not Load!')
@@ -409,11 +424,11 @@ const CdcChart: React.FC<CdcChartProps> = ({
    * When cove has a config and container ref publish the cove_loaded event.
    */
   useEffect(() => {
-    if (container && !_.isEmpty(config) && !coveLoadedEventRan) {
+    if (container && !isLoading && !_.isEmpty(config) && !coveLoadedEventRan) {
       publish('cove_loaded', { config: config })
-      setCoveLoadedEventRan(true)
+      dispatch({ type: 'SET_LOADED_EVENT', payload: true })
     }
-  }, [container, config]) // eslint-disable-line
+  }, [container, config, isLoading]) // eslint-disable-line
 
   /**
    * Handles filter change events outside of COVE
@@ -447,7 +462,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
         let configCopy = { ...config }
         delete configCopy['filters']
         setConfig(configCopy)
-        setFilteredData(filterVizData(externalFilters, excludedData))
+        dispatch({ type: 'SET_FILTERED_DATA', payload: filterVizData(externalFilters, excludedData) })
       }
     }
 
@@ -459,7 +474,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     ) {
       let newConfigHere = { ...config, filters: externalFilters }
       setConfig(newConfigHere)
-      setFilteredData(filterVizData(externalFilters, excludedData))
+      dispatch({ type: 'SET_FILTERED_DATA', payload: filterVizData(externalFilters, excludedData) })
     }
   }, [externalFilters]) // eslint-disable-line
 
@@ -467,9 +482,9 @@ const CdcChart: React.FC<CdcChartProps> = ({
   useEffect(() => {
     if (stateData && config.xAxis && config.runtime?.seriesKeys) {
       const newColorScale = getColorScale(config)
-
-      setColorScale(newColorScale)
-      setLoading(false)
+      dispatch({ type: 'SET_COLOR_SCALE', payload: newColorScale })
+      //  setColorScale(newColorScale)
+      dispatch({ type: 'SET_LOADING', payload: false })
     }
 
     if (config && stateData && config.sortData) {
@@ -486,7 +501,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     const newHighlight = _.findKey(config.runtime.seriesLabels, v => v === label.datum) || label.datum
 
     const newSeriesHighlight = _.xor(seriesHighlight, [newHighlight])
-    setSeriesHighlight(newSeriesHighlight)
+    dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: newSeriesHighlight })
   }
   // Called on reset button click, unhighlights all data series
   const handleShowAll = () => {
@@ -497,7 +512,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     } catch (e) {
       console.error('COVE:', e.message)
     }
-    setSeriesHighlight([])
+    dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [] })
   }
 
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
@@ -733,8 +748,13 @@ const CdcChart: React.FC<CdcChartProps> = ({
     // cleaning is deleting data we need in forecasting charts.
     if (!Array.isArray(data)) return []
     if (config.visualizationType === 'Forecasting') return data
-    if (config.series?.some(series => !!series.dynamicCategory)) return data
-    return config?.xAxis?.dataKey ? transform.cleanData(data, config.xAxis.dataKey) : data
+    //  specify keys that needs  to be cleaned to render chart and skip rest
+    const CIkeys: string[] = Object.values(config.confidenceKeys) as string[]
+    const seriesKeys: string[] = config.series.map(s => s.dataKey)
+    const keysToClean: string[] = seriesKeys.concat(CIkeys)
+    // key that does not need to be cleaned
+    const excludedKey = config.xAxis.dataKey
+    return config?.xAxis?.dataKey ? transform.cleanData(data, excludedKey, keysToClean) : data
   }
 
   const getTableRuntimeData = () => {
@@ -797,7 +817,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     return classes
   }
 
-  if (!loading) {
+  if (!isLoading) {
     const tableLink = (
       <a href={`#data-table-${config.dataKey}`} className='margin-left-href'>
         {config.dataKey} (Go to Table)
@@ -841,7 +861,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   <Filters
                     config={config}
                     setConfig={setConfig}
-                    setFilteredData={setFilteredData}
+                    setFilteredData={setFiltersData}
                     filteredData={filteredData}
                     excludedData={excludedData}
                     filterData={filterVizData}
@@ -884,7 +904,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                     )}
                     {/* Line Chart */}
                     {config.visualizationType === 'Line' &&
-                      (checkLineToBarGraph() ? (
+                      (convertLineToBarGraph ? (
                         <div ref={parentRef} style={{ width: `100%` }}>
                           <ParentSize>
                             {parent => (
@@ -907,7 +927,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                         <Filters
                           config={config}
                           setConfig={setConfig}
-                          setFilteredData={setFilteredData}
+                          setFilteredData={setFiltersData}
                           filteredData={filteredData}
                           excludedData={excludedData}
                           filterData={filterVizData}
@@ -949,9 +969,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                 {/* Description */}
 
                 {config.description && config.visualizationType !== 'Spark Line' && (
-                  <div className={getChartSubTextClasses(config, currentViewport, isLegendWrapViewport).join(' ')}>
-                    {parse(config.description)}
-                  </div>
+                  <div className={getChartSubTextClasses().join(' ')}>{parse(config.description)}</div>
                 )}
 
                 {/* buttons */}
@@ -1029,18 +1047,14 @@ const CdcChart: React.FC<CdcChartProps> = ({
   }
 
   const contextValues = {
+    ...state,
     brushConfig,
     capitalize,
+    convertLineToBarGraph,
     clean,
     colorPalettes,
-    colorScale,
-    config,
-    currentViewport,
     dashboardConfig,
     debugSvg: isDebug,
-    dimensions,
-    dynamicLegendItems,
-    excludedData,
     formatDate,
     formatNumber,
     formatTooltipsDate,
@@ -1051,10 +1065,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
     handleChartTabbing,
     highlight,
     handleShowAll,
-    imageId,
     isDashboard,
     isDebug,
-    isDraggingAnnotation,
     handleDragStateChange,
     isEditor,
     isNumber,
@@ -1062,25 +1074,19 @@ const CdcChart: React.FC<CdcChartProps> = ({
     legendId,
     legendRef,
     lineOptions,
-    loading,
     missingRequiredSections,
     outerContainerRef,
     parentRef,
     parseDate,
     rawData: _.cloneDeep(stateData) ?? {},
-    seriesHighlight,
-    setBrushConfig,
     setConfig,
-    setDynamicLegendItems,
     setEditing,
-    setFilteredData,
     setParentConfig,
-    setSeriesHighlight,
     setSharedFilter,
     setSharedFilterValue,
     svgRef,
-    tableData: filteredData || excludedData, // do not clean table data
-    transformedData: clean(filteredData || excludedData), // do this right before passing to components
+    tableData: filteredData || excludedData,
+    transformedData: clean(filteredData || excludedData),
     twoColorPalette,
     unfilteredData: _.cloneDeep(stateData),
     updateConfig
@@ -1088,16 +1094,18 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
   return (
     <ConfigContext.Provider value={contextValues}>
-      <Layout.VisualizationWrapper
-        config={config}
-        isEditor={isEditor}
-        currentViewport={currentViewport}
-        ref={outerContainerRef}
-        imageId={imageId}
-        showEditorPanel={config?.showEditorPanel}
-      >
-        {body}
-      </Layout.VisualizationWrapper>
+      <ChartDispatchContext.Provider value={dispatch}>
+        <Layout.VisualizationWrapper
+          config={config}
+          isEditor={isEditor}
+          currentViewport={currentViewport}
+          ref={outerContainerRef}
+          imageId={imageId}
+          showEditorPanel={config?.showEditorPanel}
+        >
+          {body}
+        </Layout.VisualizationWrapper>
+      </ChartDispatchContext.Provider>
     </ConfigContext.Provider>
   )
 }

package/src/ConfigContext.tsx

@@ -1,6 +1,11 @@
-import { createContext } from 'react'
+import { createContext, Dispatch } from 'react'
 import { ChartContext } from './types/ChartContext'
 
+import ChartActions from './store/chart.actions'
+
+// export const ConfigContext = createContext(initialState)
+export const ChartDispatchContext = createContext<Dispatch<ChartActions>>(() => {})
+
 const ConfigContext = createContext({} as ChartContext)
 
 export default ConfigContext

package/src/_stories/Chart.DynamicSeries.stories.tsx

@@ -10,7 +10,22 @@ const meta: Meta<typeof Chart> = {
 
 type Story = StoryObj<typeof Chart>
 
-export const Line: Story = {
+// data with a line break
+const data = DynamicSeriesConfig.data.map((d, i) => (i === 4 ? { ...d, Data_Value: null } : d))
+export const LineShowPoints: Story = {
+  args: {
+    config: {
+      ...DynamicSeriesConfig,
+      data,
+      originalFormattedData: data,
+      formattedData: data,
+      lineDatapointStyle: 'always show'
+    },
+    isEditor: false
+  }
+}
+
+export const LineHoverPoints: Story = {
   args: {
     config: DynamicSeriesConfig,
     isEditor: false

package/src/_stories/Chart.Filters.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Chart from '../CdcChartComponent'
+import { editConfigKeys } from '../helpers/configHelpers'
+import scatterPlotDownloadImage from './_mock/scatterplot-image-download.json'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Filters',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Tab_Simple: Story = {
+  args: {
+    config: editConfigKeys(scatterPlotDownloadImage, [{ path: ['filters', '0', 'filterStyle'], value: 'tab-simple' }])
+  }
+}
+
+export default meta

package/src/components/Axis/Categorical.Axis.tsx

@@ -96,7 +96,7 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
               const isLastIndex = config.yAxis.categories.length - 1 === barStack.index
               const textSize = appFontSize / 1.3
               const textColor = chroma(bar.color).luminance() < 0.4 ? '#fff' : '#000'
-              const textWidth = getTextWidth(bar.key)
+              const textWidth = getTextWidth(bar.key, `${textSize}px`)
               const displayText = Number(textWidth) < bar.width && bar.height > textSize
               const tooltip = `<ul>
               <li class="tooltip-heading""> Label : ${bar.key}  </li>

package/src/components/BarChart/components/BarChart.Vertical.tsx

@@ -6,7 +6,6 @@ import BarChartContext, { type BarChartContextValues } from './context'
 import { useBarChart } from '../../../hooks/useBarChart'
 import { useHighlightedBars } from '../../../hooks/useHighlightedBars'
 import { getBarConfig, testZeroValue } from '../helpers'
-import { isConvertLineToBarGraph } from '../../../helpers/isConvertLineToBarGraph'
 // VisX library imports
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
@@ -25,7 +24,8 @@ import _ from 'lodash'
 import { getBarData } from '../helpers/getBarData'
 
 export const BarChartVertical = () => {
-  const { xScale, yScale, xMax, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
+  const { xScale, yScale, xMax, yMax, seriesScale, convertLineToBarGraph } =
+    useContext<BarChartContextValues>(BarChartContext)
 
   const [barWidth, setBarWidth] = useState(0)
   const [totalBarsInGroup, setTotalBarsInGroup] = useState(0)
@@ -70,9 +70,7 @@ export const BarChartVertical = () => {
   const _data = getBarData(config, data, hasConfidenceInterval)
   return (
     config.visualizationSubType !== 'stacked' &&
-    (config.visualizationType === 'Bar' ||
-      config.visualizationType === 'Combo' ||
-      isConvertLineToBarGraph(config.visualizationType, data, config.allowLineToBarGraph)) &&
+    (config.visualizationType === 'Bar' || config.visualizationType === 'Combo' || convertLineToBarGraph) &&
     config.orientation === 'vertical' && (
       <Group>
         <BarGroup

package/src/components/BarChart/components/BarChart.jsx

@@ -10,15 +10,25 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext from '../../../ConfigContext'
 import BarChartContext from './context'
 
-const BarChart = ({ xScale, yScale, seriesScale, xMax, yMax, handleTooltipMouseOver, handleTooltipMouseOff, handleTooltipClick }) => {
-  const { transformedData: data, config } = useContext(ConfigContext)
+const BarChart = ({
+  xScale,
+  yScale,
+  seriesScale,
+  xMax,
+  yMax,
+  handleTooltipMouseOver,
+  handleTooltipMouseOff,
+  handleTooltipClick
+}) => {
+  const { transformedData: data, config, convertLineToBarGraph } = useContext(ConfigContext)
 
   const contextValues = {
     xScale,
     yScale,
     xMax,
     yMax,
-    seriesScale
+    seriesScale,
+    convertLineToBarGraph
   }
 
   return (
@@ -29,7 +39,17 @@ const BarChart = ({ xScale, yScale, seriesScale, xMax, yMax, handleTooltipMouseO
           <BarChartType.StackedHorizontal />
           <BarChartType.Vertical />
           <BarChartType.Horizontal />
-          <Bar key={'bars'} display={config.tooltips.singleSeries ? 'none' : 'block'} width={Number(xMax)} height={Number(yMax)} fill={'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} onClick={e => handleTooltipClick(e, data)} />
+          <Bar
+            key={'bars'}
+            display={config.tooltips.singleSeries ? 'none' : 'block'}
+            width={Number(xMax)}
+            height={Number(yMax)}
+            fill={'transparent'}
+            fillOpacity={0.05}
+            onMouseMove={e => handleTooltipMouseOver(e, data)}
+            onMouseOut={handleTooltipMouseOff}
+            onClick={e => handleTooltipClick(e, data)}
+          />
         </Group>
       </BarChartContext.Provider>
     </ErrorBoundary>

package/src/components/BarChart/components/context.tsx

@@ -8,6 +8,7 @@ export type BarChartContextValues = {
   xScale: Function
   yScale: Function
   seriesScale: Function
+  convertLineToBarGraph: boolean
 }
 
 export default BarChartContext