@cdc/chart 4.24.3 → 4.24.4

package/index.html

@@ -5,16 +5,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <style>
       body {
-        /* max-width: 1000px; */
-        margin: 0 auto !important;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
+        margin: 0;
+        border-top: none !important;
       }
 
-      .react-container + .react-container {
-        margin-top: 3rem;
+      .cdc-map-outer-container {
+        min-height: 100vh;
       }
+
+      /* .react-container + .react-container {
+        margin-top: 3rem;
+      } */
     </style>
     <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/contrib/libs/bootstrap/latest/css/bootstrap.min.css?_=39423" />
     <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/4.0/assets/css/app.min.css?_=39423" />
@@ -45,6 +46,7 @@
   -->
 
     <!-- GENERIC CHART TYPES -->
+    <div class="react-container" data-config="/examples/test.json"></div>
     <!-- <div class="react-container" data-config="/examples/private/rvr.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/filters/url-filter.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/bar/additional-column-tooltip.json"></div> -->
@@ -56,7 +58,7 @@
     <!-- <div class="react-container" data-config="/examples/feature/forest-plot/forest-plot.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div> -->
     <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Viz.json></div> -->
-    <!-- <div class="react-container" data-config=/examples/feature/regions/index.json></div> -->
+    <div class="react-container" data-config=/examples/feature/regions/index.json></div>
     <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
     <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/forecasting/forecasting.json"></div> -->
@@ -69,12 +71,12 @@
     <!-- <div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/combo/planet-combo-example-config.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/combo/right-issues.json"></div> -->
-    <div class="react-container" data-config="/examples/region-issue.json"></div>
+    <!-- <div class="react-container" data-config="/examples/region-issue.json"></div> -->
 
     <!-- BAR -->
     <!-- <div class="react-container" data-config="/examples/feature/bar/planet-example-config.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/feature/bar/example-bar-chart.json"></div> -->
+    <div class="react-container" data-config="/examples/feature/bar/example-bar-chart.json"></div>
     <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart-max-increase.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-stacked-bar-chart.json"></div> -->
@@ -115,7 +117,7 @@
     <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-bar-chart-nonnumeric.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/sparkline.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/sparkline-chart-nonnumeric.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/feature/bar/lollipop.json"></div> -->
+    <div class="react-container" data-config="/examples/region-issue.json"></div>
     <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div> -->
 
     <!-- TESTS CUTOFF -->
@@ -133,7 +135,7 @@
 
     <!-- GENERIC CHART TYPES  -->
     <!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
+    <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div>
 
     <!-- HORIZONTAL BAR CHARTS -->
     <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.24.3",
+  "version": "4.24.4",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -60,7 +60,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "9c7ef7ca74f2d2a1e04d923b133fe0fc557a62bf",
+  "gitHead": "1843b4632140d582af6a87606374cbd4fe25ad5c",
   "devDependencies": {
     "@types/d3-sankey": "^0.12.4",
     "resize-observer-polyfill": "^1.5.1"

package/src/CdcChart.tsx

@@ -1,9 +1,11 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react'
+import React, { useState, useEffect, useCallback, useRef, useId } from 'react'
 
 // IE11
 import ResizeObserver from 'resize-observer-polyfill'
 import 'whatwg-fetch'
 import * as d3 from 'd3-array'
+import Layout from '@cdc/core/components/Layout'
+import Button from '@cdc/core/components/elements/Button'
 
 // External Libraries
 import { scaleOrdinal } from '@visx/scale'
@@ -94,8 +96,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   if (config.table && (!config.table?.label || config.table?.label === '')) config.table.label = 'Data Table'
 
   const { barBorderClass, lineDatapointClass, contentClasses, sparkLineStyles } = useDataVizClasses(config)
-
-  const handleChartTabbing = !config.legend?.hide ? `legend` : config?.title ? `dataTableSection__${config.title.replace(/\s/g, '')}` : `dataTableSection`
+  const legendId = useId()
+  const handleChartTabbing = !config.legend?.hide ? legendId : config?.title ? `dataTableSection__${config.title.replace(/\s/g, '')}` : `dataTableSection`
 
   const reloadURLData = async () => {
     if (config.dataUrl) {
@@ -443,7 +445,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         if (series.type === 'Forecasting') {
           newConfig.runtime.forecastingSeriesKeys.push(series)
         }
-        if (series.type === 'Bar') {
+        if (series.type === 'Bar' || series.type === 'Combo') {
           newConfig.runtime.barSeriesKeys.push(series.dataKey)
         }
         if (series.type === 'Line' || series.type === 'dashed-sm' || series.type === 'dashed-md' || series.type === 'dashed-lg') {
@@ -1008,6 +1010,63 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return formattedValue
   }
 
+  const Confirm = () => {
+    const confirmDone = e => {
+      if (e) {
+        e.preventDefault()
+      }
+
+      let newConfig = { ...config }
+      delete newConfig.newViz
+
+      updateConfig(newConfig)
+    }
+
+    const styles = {
+      position: 'relative',
+      height: '100vh',
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gridArea: 'content'
+    }
+
+    return (
+      <section className='waiting' style={styles}>
+        <section className='waiting-container'>
+          <h3>Finish Configuring</h3>
+          <p>Set all required options to the left and confirm below to display a preview of the chart.</p>
+          <Button className='btn' style={{ margin: '1em auto' }} disabled={missingRequiredSections()} onClick={e => confirmDone(e)}>
+            I'm Done
+          </Button>
+        </section>
+      </section>
+    )
+  }
+
+  const Error = () => {
+    const styles = {
+      position: 'absolute',
+      background: 'white',
+      zIndex: '999',
+      height: '100vh',
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gridArea: 'content'
+    }
+    return (
+      <section className='waiting' style={styles}>
+        <section className='waiting-container'>
+          <h3>Error With Configuration</h3>
+          <p>{config.runtime.editorErrorMessage}</p>
+        </section>
+      </section>
+    )
+  }
+
   // this is passed DOWN into the various components
   // then they do a lookup based on the bin number as index into here (TT)
   const applyLegendToRow = rowObj => {
@@ -1042,6 +1101,17 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   // Prevent render if loading
   let body = <Loading />
 
+  const getChartWrapperClasses = () => {
+    const classes = ['chart-container', 'p-relative']
+    if (config.legend.position === 'bottom') classes.push('bottom')
+    if (config.legend.hide) classes.push('legend-hidden')
+    if (lineDatapointClass) classes.push(lineDatapointClass)
+    if (!config.barHasBorder) classes.push('chart-bar--no-border')
+    if (isDebug) classes.push('debug')
+    classes.push(...contentClasses)
+    return classes
+  }
+
   if (!loading) {
     const tableLink = (
       <a href={`#data-table-${config.dataKey}`} className='margin-left-href'>
@@ -1051,80 +1121,82 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     body = (
       <>
         {isEditor && <EditorPanel />}
-        {!missingRequiredSections() && !config.newViz && (
-          <div className='cdc-chart-inner-container' aria-label={handleChartAriaLabels(config)} tabIndex={0}>
-            <Title showTitle={config.showTitle} isDashboard={isDashboard} title={title} superTitle={config.superTitle} classes={['chart-title', `${config.theme}`, 'cove-component__header']} style={undefined} />
-            <SkipTo skipId={handleChartTabbing} skipMessage='Skip Over Chart Container' />
-
-            {/* Filters */}
-            {config.filters && !externalFilters && config.visualizationType !== 'Spark Line' && <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />}
-            {/* Visualization */}
-            {config?.introText && config.visualizationType !== 'Spark Line' && <section className='introText'>{parse(config.introText)}</section>}
-            <div
-              style={{ marginBottom: computeMarginBottom(config, legend, currentViewport) }}
-              className={`chart-container  p-relative ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')} ${isDebug ? 'debug' : ''}`}
-            >
-              {/* All charts except sparkline */}
-              {config.visualizationType !== 'Spark Line' && chartComponents[config.visualizationType]}
-
-              {/* Sparkline */}
-              {config.visualizationType === 'Spark Line' && (
-                <>
-                  <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />
-                  {config?.introText && (
-                    <section className='introText' style={{ padding: '0px 0 35px' }}>
-                      {parse(config.introText)}
-                    </section>
-                  )}
-                  <div style={{ height: `100px`, width: `100%`, ...sparkLineStyles }}>
-                    <ParentSize>{parent => <SparkLine width={parent.width} height={parent.height} />}</ParentSize>
-                  </div>
-                  {description && (
-                    <div className='subtext' style={{ padding: '35px 0 15px' }}>
-                      {parse(description)}
+        <Layout.Responsive isEditor={isEditor}>
+          {config.newViz && <Confirm />}
+          {undefined === config.newViz && isEditor && config.runtime && config.runtime?.editorErrorMessage && <Error />}
+          {!missingRequiredSections() && !config.newViz && (
+            <div className='cdc-chart-inner-container cove-component__content' aria-label={handleChartAriaLabels(config)} tabIndex={0}>
+              <Title showTitle={config.showTitle} isDashboard={isDashboard} title={title} superTitle={config.superTitle} classes={['chart-title', `${config.theme}`, 'cove-component__header']} style={undefined} />
+
+              {/* Filters */}
+              {config.filters && !externalFilters && config.visualizationType !== 'Spark Line' && <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />}
+              <SkipTo skipId={handleChartTabbing} skipMessage='Skip Over Chart Container' />
+              {/* Visualization */}
+              {config?.introText && config.visualizationType !== 'Spark Line' && <section className='introText'>{parse(config.introText)}</section>}
+
+              <div style={{ marginBottom: computeMarginBottom(config, legend, currentViewport) }} className={getChartWrapperClasses().join(' ')}>
+                {/* All charts except sparkline */}
+                {config.visualizationType !== 'Spark Line' && chartComponents[config.visualizationType]}
+
+                {/* Sparkline */}
+                {config.visualizationType === 'Spark Line' && (
+                  <>
+                    <Filters config={config} setConfig={setConfig} setFilteredData={setFilteredData} filteredData={filteredData} excludedData={excludedData} filterData={filterData} dimensions={dimensions} />
+                    {config?.introText && (
+                      <section className='introText' style={{ padding: '0px 0 35px' }}>
+                        {parse(config.introText)}
+                      </section>
+                    )}
+                    <div style={{ height: `100px`, width: `100%`, ...sparkLineStyles }}>
+                      <ParentSize>{parent => <SparkLine width={parent.width} height={parent.height} />}</ParentSize>
                     </div>
-                  )}
-                </>
+                    {description && (
+                      <div className='subtext' style={{ padding: '35px 0 15px' }}>
+                        {parse(description)}
+                      </div>
+                    )}
+                  </>
+                )}
+                {/* Sankey */}
+                {config.visualizationType === 'Sankey' && <ParentSize aria-hidden='true'>{parent => <SankeyChart runtime={config.runtime} width={parent.width} height={parent.height} />}</ParentSize>}
+                {!config.legend.hide && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Sankey' && <Legend ref={legendRef} />}
+              </div>
+              {/* Link */}
+              {isDashboard && config.table && config.table.show && config.table.showDataTableLink ? tableLink : link && link}
+
+              {/* Description */}
+              {description && config.visualizationType !== 'Spark Line' && <div className={'column ' + config.isResponsiveTicks ? 'subtext--responsive-ticks' : 'subtext'}>{parse(description)}</div>}
+
+              {/* buttons */}
+              <MediaControls.Section classes={['download-buttons']}>
+                {config.table.showDownloadImgButton && <MediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={config} elementToCapture={imageId} />}
+                {config.table.showDownloadPdfButton && <MediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={config} elementToCapture={imageId} />}
+              </MediaControls.Section>
+
+              {/* Data Table */}
+              {((config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Sankey') || (config.visualizationType === 'Sankey' && config.table.show)) && (
+                <DataTable
+                  config={config}
+                  rawData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : config.table.customTableConfig ? filterData(config.filters, config.data) : config.data}
+                  runtimeData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : transform.applySuppression(filteredData || excludedData, config.suppressedData)}
+                  expandDataTable={config.table.expanded}
+                  columns={config.columns}
+                  displayDataAsText={displayDataAsText}
+                  displayGeoName={displayGeoName}
+                  applyLegendToRow={applyLegendToRow}
+                  tableTitle={config.table.label}
+                  indexTitle={config.table.indexLabel}
+                  vizTitle={title}
+                  viewport={currentViewport}
+                  tabbingId={handleChartTabbing}
+                  colorScale={colorScale}
+                />
               )}
-              {/* Sankey */}
-              {config.visualizationType === 'Sankey' && <ParentSize aria-hidden='true'>{parent => <SankeyChart runtime={config.runtime} width={parent.width} height={parent.height} />}</ParentSize>}
-              {!config.legend.hide && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Sankey' && <Legend ref={legendRef} />}
+              {config?.footnotes && <section className='footnotes'>{parse(config.footnotes)}</section>}
+              {/* show pdf or image button */}
             </div>
-            {/* Link */}
-            {isDashboard && config.table && config.table.show && config.table.showDataTableLink ? tableLink : link && link}
-
-            {/* Description */}
-            {description && config.visualizationType !== 'Spark Line' && <div className={'column ' + config.isResponsiveTicks ? 'subtext--responsive-ticks' : 'subtext'}>{parse(description)}</div>}
-
-            {/* buttons */}
-            <MediaControls.Section classes={['download-buttons']}>
-              {config.table.showDownloadImgButton && <MediaControls.Button text='Download Image' title='Download Chart as Image' type='image' state={config} elementToCapture={imageId} />}
-              {config.table.showDownloadPdfButton && <MediaControls.Button text='Download PDF' title='Download Chart as PDF' type='pdf' state={config} elementToCapture={imageId} />}
-            </MediaControls.Section>
-
-            {/* Data Table */}
-            {((config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && config.visualizationType !== 'Sankey') || (config.visualizationType === 'Sankey' && config.table.show)) && (
-              <DataTable
-                config={config}
-                rawData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : config.table.customTableConfig ? filterData(config.filters, config.data) : config.data}
-                runtimeData={config.visualizationType === 'Sankey' ? config?.data?.[0]?.tableData : transform.applySuppression(filteredData || excludedData, config.suppressedData)}
-                expandDataTable={config.table.expanded}
-                columns={config.columns}
-                displayDataAsText={displayDataAsText}
-                displayGeoName={displayGeoName}
-                applyLegendToRow={applyLegendToRow}
-                tableTitle={config.table.label}
-                indexTitle={config.table.indexLabel}
-                vizTitle={title}
-                viewport={currentViewport}
-                tabbingId={handleChartTabbing}
-                colorScale={colorScale}
-              />
-            )}
-            {config?.footnotes && <section className='footnotes'>{parse(config.footnotes)}</section>}
-            {/* show pdf or image button */}
-          </div>
-        )}
+          )}
+        </Layout.Responsive>
       </>
     )
   }
@@ -1185,17 +1257,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     debugSvg: isDebug
   }
 
-  const classes = ['cdc-open-viz-module', 'type-chart', `${currentViewport}`, `font-${config.fontSize}`, `${config.theme}`]
-
-  config.visualizationType === 'Spark Line' && classes.push(`type-sparkline`)
-  isEditor && classes.push('spacing-wrapper')
-  isEditor && classes.push('isEditor')
-
   return (
     <ConfigContext.Provider value={contextValues}>
-      <div className={`${classes.join(' ')}`} ref={outerContainerRef} data-lollipop={config.isLollipopChart} data-download-id={imageId}>
+      <Layout.VisualizationWrapper config={config} isEditor={isEditor} currentViewport={currentViewport} ref={outerContainerRef} imageId={imageId} showEditorPanel={config?.showEditorPanel}>
         {body}
-      </div>
+      </Layout.VisualizationWrapper>
     </ConfigContext.Provider>
   )
 }

package/src/components/BarChart/components/BarChart.Horizontal.tsx

@@ -78,6 +78,10 @@ export const BarChartHorizontal = () => {
                   let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
                   let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
                   let barHeight = config.barHeight
+                  let numbericBarHeight = parseInt(!config.isLollipopChart ? barHeight : lollipopBarWidth)
+                  if (isNaN(numbericBarHeight)) {
+                    numbericBarHeight = 25
+                  }
                   let barY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(scaleVal)
                   const barXBase = bar.value < 0 ? Math.abs(xScale(bar.value)) : xScale(scaleVal)
                   const barWidthHorizontal = Math.abs(xScale(bar.value) - xScale(scaleVal))
@@ -131,9 +135,9 @@ export const BarChartHorizontal = () => {
                   barColor = assignColorsToValues(barGroups.length, barGroup.index, barColor) // Color code by category
                   const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
                   const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
-                  const isHighlightedBar = highlightedBarValues?.includes(yAxisValue)
-                  const highlightedBarColor = getHighlightedBarColorByValue(yAxisValue)
-                  const highlightedBar = getHighlightedBarByValue(yAxisValue)
+                  const isHighlightedBar = highlightedBarValues?.includes(xAxisValue)
+                  const highlightedBarColor = getHighlightedBarColorByValue(xAxisValue)
+                  const highlightedBar = getHighlightedBarByValue(xAxisValue)
                   const borderColor = isHighlightedBar ? highlightedBarColor : config.barHasBorder === 'true' ? '#000' : 'transparent'
                   const borderWidth = isHighlightedBar ? highlightedBar.borderWidth : config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0
                   const displaylollipopShape = config.suppressedData.some(d => bar.key === d.column && bar.value === d.value) ? 'none' : 'block'
@@ -141,18 +145,7 @@ export const BarChartHorizontal = () => {
                   if (barColor && labelColor && textFits) {
                     labelColor = getContrastColor('#000', barColor)
                   }
-                  const getTop = () => {
-                    if (Number(barHeight) < 20) return -4
-                    if (Number(barHeight) < 25) return -1
-                    if (Number(barHeight) < 30) return 2
-                    if (Number(barHeight) < 35) return 4
-                    if (Number(barHeight) < 40) return 5
-                    if (Number(barHeight) < 50) return 9
-                    if (Number(barHeight) < 60) return 10
-                    else {
-                      return 12
-                    }
-                  }
+
                   const background = () => {
                     if (isRegularLollipopColor) return barColor
                     if (isTwoToneLollipopColor) return chroma(barColor).brighten(1)
@@ -172,7 +165,7 @@ export const BarChartHorizontal = () => {
                           borderStyle: 'solid',
                           borderWidth: `${borderWidth}px`,
                           width: barWidth,
-                          height: !config.isLollipopChart ? barHeight : lollipopBarWidth,
+                          height: numbericBarHeight,
                           x: barX,
                           y: barHeight * bar.index,
                           onMouseOver: () => onMouseOverBar(xAxisValue, bar.key),

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

@@ -151,19 +151,19 @@ export const BarChartVertical = () => {
                      * color the bar that is using the filter with barColor and
                      * color the filteredOut (typically gray) bars with the filteredOutColor
                      */
-                    if (dashboardConfig && dashboardConfig.dashboard.sharedFilters) {
+                    if (dashboardConfig && dashboardConfig.dashboard.sharedFilters?.length !== 0) {
                       const { sharedFilters } = dashboardConfig.dashboard
 
                       _barColor = sharedFilters.map(_sharedFilter => {
                         if (_sharedFilter.setBy === config.uid) {
                           // If the current filter is the reset filter item.
-                          if (_sharedFilter.resetLabel === _sharedFilter.active) return barColor
+                          if (_sharedFilter.resetLabel === _sharedFilter.active) return colorScale(config.runtime.seriesLabels[bar.key])
                           // If the current filter is the bars
-                          if (_sharedFilter.active === transformedData[barGroup.index][config.xAxis.dataKey]) return barColor
+                          if (_sharedFilter.active === transformedData[barGroup.index][config.xAxis.dataKey]) return colorScale(config.runtime.seriesLabels[bar.key])
                           return _filteredOutColor
                         } else {
                           // If the setBy isn't the config.uid return the original barColor
-                          return barColor
+                          return colorScale(config.runtime.seriesLabels[bar.key])
                         }
                       })[0]
 
@@ -188,7 +188,7 @@ export const BarChartVertical = () => {
                           config: config,
                           index: newIndex,
                           id: `barGroup${barGroup.index}`,
-                          background: getBarBackgroundColor(barColor),
+                          background: getBarBackgroundColor(colorScale(config.runtime.seriesLabels[bar.key])),
                           borderColor,
                           borderStyle: 'solid',
                           borderWidth: `${borderWidth}px`,