@cdc/chart 4.24.12 → 4.25.2-25

package/src/helpers/getComboChartConfig.ts

@@ -0,0 +1,42 @@
+import _ from 'lodash'
+import { ChartConfig } from '../types/ChartConfig'
+import * as d3 from 'd3-array'
+
+export const getComboChartConfig = (newConfig: ChartConfig) => {
+  if (newConfig.visualizationType !== 'Combo' || !newConfig.series) return
+
+  const runtimeKeys = {
+    barSeriesKeys: [],
+    lineSeriesKeys: [],
+    areaSeriesKeys: [],
+    forecastingSeriesKeys: []
+  }
+
+  // Define a mapping of series types to runtime keys
+  const seriesTypeMap = new Map([
+    ['Area Chart', 'areaSeriesKeys'],
+    ['Forecasting', 'forecastingSeriesKeys'],
+    ['Bar', 'barSeriesKeys'],
+    ['Combo', 'barSeriesKeys'],
+    ['Line', 'lineSeriesKeys'],
+    ['dashed-sm', 'lineSeriesKeys'],
+    ['dashed-md', 'lineSeriesKeys'],
+    ['dashed-lg', 'lineSeriesKeys']
+  ])
+
+  newConfig.series.forEach(series => {
+    const runtimeKey = seriesTypeMap.get(series.type)
+    if (runtimeKey) {
+      const valueToPush = runtimeKey === 'barSeriesKeys' || runtimeKey === 'lineSeriesKeys' ? series.dataKey : series
+      runtimeKeys[runtimeKey].push(valueToPush)
+    }
+
+    // Change Combo series type to Bar
+    if (series.type === 'Combo') {
+      series.type = 'Bar'
+    }
+  })
+
+  // Assign the processed runtime keys to the configuration
+  return { ...newConfig.runtime, ...runtimeKeys }
+}

package/src/helpers/getExcludedData.ts

@@ -0,0 +1,37 @@
+import { isDateScale } from '@cdc/core/helpers/cove/date'
+import _ from 'lodash'
+import { ChartConfig } from '../types/ChartConfig'
+export const getExcludedData = (newConfig: ChartConfig, data: object[]) => {
+  let newExcludedData = data
+  if (newConfig.exclusions && newConfig.exclusions.active) {
+    if (newConfig.xAxis.type === 'categorical' && newConfig.exclusions.keys?.length > 0) {
+      newExcludedData = data.filter(e => !newConfig.exclusions.keys.includes(e[newConfig.xAxis.dataKey]))
+    } else if (
+      isDateScale(newConfig.xAxis) &&
+      (newConfig.exclusions.dateStart || newConfig.exclusions.dateEnd) &&
+      newConfig.xAxis.dateParseFormat
+    ) {
+      // Filter dates
+      const timestamp = e => new Date(e).getTime()
+
+      let startDate = timestamp(newConfig.exclusions.dateStart)
+      let endDate = timestamp(newConfig.exclusions.dateEnd) + 86399999 //Increase by 24h in ms (86400000ms - 1ms) to include selected end date for .getTime() comparative
+
+      let startDateValid = undefined !== typeof startDate && false === isNaN(startDate)
+      let endDateValid = undefined !== typeof endDate && false === isNaN(endDate)
+
+      if (startDateValid && endDateValid) {
+        newExcludedData = data.filter(
+          e => timestamp(e[newConfig.xAxis.dataKey]) >= startDate && timestamp(e[newConfig.xAxis.dataKey]) <= endDate
+        )
+      } else if (startDateValid) {
+        newExcludedData = data.filter(e => timestamp(e[newConfig.xAxis.dataKey]) >= startDate)
+      } else if (endDateValid) {
+        newExcludedData = data.filter(e => timestamp(e[newConfig.xAxis.dataKey]) <= endDate)
+      }
+    } else {
+      newExcludedData = data
+    }
+  }
+  return newExcludedData
+}

package/src/helpers/getTopAxis.ts

@@ -0,0 +1,7 @@
+export default function getTopAxis(config) {
+  // When to show top axis
+  const hasTopAxis =
+    config.visualizationType === 'Bar' || config.visualizationType === 'Combo' || config.visualizationType === 'Line'
+
+  return { hasTopAxis }
+}

package/src/helpers/isConvertLineToBarGraph.ts

@@ -1,4 +1,11 @@
-export const isConvertLineToBarGraph = (visualizationType, filteredData, allowLineToBarGraph) => {
-  const convertLineToBarGraph = visualizationType === 'Line' && filteredData?.length < 3 && allowLineToBarGraph ? true : false
-  return convertLineToBarGraph
+import _ from 'lodash'
+
+export const isConvertLineToBarGraph = (configObj, filteredData) => {
+  const { allowLineToBarGraph, formattedData, series, visualizationType, xAxis } = configObj
+  if (!allowLineToBarGraph) return false
+  const lineWithLessThanThreePoints = visualizationType === 'Line' && filteredData?.length < 3
+  const isDynamicSeries = series?.some(series => series.dynamicCategory)
+  const isDynamicWithLessThanThreePoints =
+    isDynamicSeries && _.uniq(formattedData?.map(data => data[xAxis.dataKey])).length <= 2
+  return lineWithLessThanThreePoints || isDynamicWithLessThanThreePoints
 }

package/src/hooks/useBarChart.ts

@@ -1,8 +1,11 @@
 import React, { useContext, useEffect, useState } from 'react'
-import ConfigContext from '../ConfigContext'
+import ConfigContext, { ChartDispatchContext } from '../ConfigContext'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
+import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
 export const useBarChart = () => {
-  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, setSeriesHighlight, seriesHighlight } = useContext(ConfigContext)
+  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, setSeriesHighlight, seriesHighlight } =
+    useContext(ConfigContext)
+  const dispatch = useContext(ChartDispatchContext)
   const { orientation } = config
   const [hoveredBar, setHoveredBar] = useState(null)
 
@@ -17,12 +20,22 @@ export const useBarChart = () => {
   const isRounded = config.barStyle === 'rounded'
   const isStacked = config.visualizationSubType === 'stacked'
   const tipRounding = config.tipRounding
-  const radius = config.roundingStyle === 'standard' ? '8px' : config.roundingStyle === 'shallow' ? '5px' : config.roundingStyle === 'finger' ? '15px' : '0px'
+  const radius =
+    config.roundingStyle === 'standard'
+      ? '8px'
+      : config.roundingStyle === 'shallow'
+      ? '5px'
+      : config.roundingStyle === 'finger'
+      ? '15px'
+      : '0px'
   const stackCount = config.runtime.seriesKeys.length
-  const fontSize = { small: 16, medium: 18, large: 20 }
   const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
-  const isBarAndLegendIsolate = config.visualizationType === 'Bar' && config.legend.behavior === 'isolate' && config.legend.axisAlign
-  const barStackedSeriesKeys = isBarAndLegendIsolate && seriesHighlight?.length ? seriesHighlight : config.runtime.barSeriesKeys || config.runtime.seriesKeys
+  const isBarAndLegendIsolate =
+    config.visualizationType === 'Bar' && config.legend.behavior === 'isolate' && config.legend.axisAlign
+  const barStackedSeriesKeys =
+    isBarAndLegendIsolate && seriesHighlight?.length
+      ? seriesHighlight
+      : config.runtime.barSeriesKeys || config.runtime.seriesKeys
 
   useEffect(() => {
     if (orientation === 'horizontal' && !config.yAxis.labelPlacement) {
@@ -68,7 +81,9 @@ export const useBarChart = () => {
       style = isHorizontal ? { borderRadius: `0 ${radius}  ${radius}  0` } : { borderRadius: `${radius} ${radius} 0 0` }
     }
     if (!isStacked && index === -1) {
-      style = isHorizontal ? { borderRadius: `${radius} 0  0 ${radius} ` } : { borderRadius: ` 0  0 ${radius} ${radius}` }
+      style = isHorizontal
+        ? { borderRadius: `${radius} 0  0 ${radius} ` }
+        : { borderRadius: ` 0  0 ${radius} ${radius}` }
     }
     if (tipRounding === 'full' && isStacked && index === 0 && stackCount > 1) {
       style = isHorizontal ? { borderRadius: `${radius} 0 0 ${radius}` } : { borderRadius: `0 0 ${radius} ${radius}` }
@@ -126,7 +141,7 @@ export const useBarChart = () => {
       barHeight = heights.stacked
     }
 
-    const labelHeight = isLabelBelowBar ? fontSize[config.fontSize] * 1.2 : 0
+    const labelHeight = isLabelBelowBar ? appFontSize * 1.2 : 0
     let barSpace = Number(config.barSpace)
 
     // calculate height of container based height, space and fontSize of labels
@@ -178,9 +193,11 @@ export const useBarChart = () => {
     const columns = config.columns
     const columnsWithTooltips = []
     let additionalTooltipItems = ''
+    const dynamicCategorySeries = config.runtime?.series?.find(series => series?.dynamicCategory)
     const closestVal =
       tableData.find(d => {
-        return d[config.xAxis.dataKey] === xAxisDataValue
+        const dynamicCategoryMatch = dynamicCategorySeries ? d[dynamicCategorySeries.dynamicCategory] === series : true
+        return d[config.xAxis.dataKey] === xAxisDataValue && dynamicCategoryMatch
       }) || {}
     Object.keys(columns).forEach(colKeys => {
       if (series && config.columns[colKeys].series && config.columns[colKeys].series !== series) return
@@ -191,7 +208,13 @@ export const useBarChart = () => {
         addColCommas: config.columns[colKeys].commas
       }
 
-      const formattedValue = formatColNumber(closestVal[config.columns[colKeys].name], 'left', true, config, formattingParams)
+      const formattedValue = formatColNumber(
+        closestVal[config.columns[colKeys].name],
+        'left',
+        true,
+        config,
+        formattingParams
+      )
       if (config.columns[colKeys].tooltips) {
         columnsWithTooltips.push([config.columns[colKeys].label, formattedValue])
       }
@@ -203,11 +226,16 @@ export const useBarChart = () => {
   }
 
   const onMouseOverBar = (categoryValue, barKey) => {
-    if (config.legend.highlightOnHover && config.legend.behavior === 'highlight' && barKey) setSeriesHighlight([barKey])
+    if (config.legend.highlightOnHover && config.legend.behavior === 'highlight' && barKey) {
+      dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [barKey] })
+    }
+
     setHoveredBar(categoryValue)
   }
   const onMouseLeaveBar = () => {
-    if (config.legend.highlightOnHover && config.legend.behavior === 'highlight') setSeriesHighlight([])
+    if (config.legend.highlightOnHover && config.legend.behavior === 'highlight') {
+      dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [] })
+    }
   }
 
   return {
@@ -225,7 +253,6 @@ export const useBarChart = () => {
     radius,
     stackCount,
     barStackedSeriesKeys,
-    fontSize,
     hasMultipleSeries,
     applyRadius,
     updateBars,

package/src/hooks/{useHighlightedBars.js → useHighlightedBars.ts}

@@ -1,7 +1,8 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../ConfigContext'
+import { ChartConfig } from '../types/ChartConfig'
 
-export const useHighlightedBars = (config, updateConfig) => {
+export const useHighlightedBars = (config: ChartConfig, updateConfig: (config) => void) => {
   const { formatDate, parseDate } = useContext(ConfigContext)
 
   let highlightedSeries = [] // only allow single series for highlights

package/src/hooks/useIntersectionObserver.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState, MutableRefObject } from 'react'
+
+interface IntersectionObserverOptions {
+  threshold?: number | number[]
+  root?: Element | null
+  rootMargin?: string
+  freezeOnceVisible?: boolean
+}
+
+export default function useIntersectionObserver(
+  elementRef: MutableRefObject<Element | null>,
+  { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false }: IntersectionObserverOptions
+) {
+  const [entry, setEntry] = useState<IntersectionObserverEntry | undefined>()
+
+  const frozen = entry?.isIntersecting && freezeOnceVisible
+
+  const updateEntry = ([entry]: IntersectionObserverEntry[]) => {
+    setEntry(entry)
+  }
+
+  useEffect(() => {
+    const node = elementRef?.current
+    const hasIOSupport = !!window.IntersectionObserver
+
+    if (!hasIOSupport || frozen || !node) return
+
+    const observerParams = { threshold, root, rootMargin }
+    const observer = new IntersectionObserver(updateEntry, observerParams)
+
+    observer.observe(node)
+
+    return () => observer.disconnect()
+  }, [elementRef, threshold, root, rootMargin, frozen])
+
+  return entry
+}

package/src/hooks/useMinMax.ts

@@ -1,6 +1,7 @@
 import { ChartConfig } from '../types/ChartConfig'
 import _ from 'lodash'
-import { isConvertLineToBarGraph } from '../helpers/isConvertLineToBarGraph'
+import ConfigContext from '../ConfigContext'
+import { useContext } from 'react'
 
 type UseMinMaxProps = {
   /** config - standard chart config */
@@ -27,14 +28,12 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   let leftMax = 0
   let rightMax = 0
 
+  const { convertLineToBarGraph } = useContext(ConfigContext)
+
   if (!data) {
     return { min, max }
   }
 
-  const checkLineToBarGraph = () => {
-    return isConvertLineToBarGraph(config.visualizationType, data, config.allowLineToBarGraph)
-  }
-
   const { visualizationType, series } = config
   const { max: enteredMaxValue, min: enteredMinValue } = config.runtime.yAxis
   const paddingAddedToAxis = config.yAxis.enablePadding ? 1 + config.yAxis.scalePadding / 100 : 1
@@ -136,14 +135,14 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
 
   // this should not apply to bar charts if there is negative CI data
   if (
-    (visualizationType === 'Bar' || checkLineToBarGraph() || (visualizationType === 'Combo' && !isAllLine)) &&
+    (visualizationType === 'Bar' || convertLineToBarGraph || (visualizationType === 'Combo' && !isAllLine)) &&
     min > 0
   ) {
     min = 0
   }
   if (
     (config.visualizationType === 'Bar' ||
-      checkLineToBarGraph() ||
+      convertLineToBarGraph ||
       (config.visualizationType === 'Combo' && !isAllLine)) &&
     min < 0
   ) {
@@ -167,7 +166,7 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
     min = Number(enteredMinValue) && isMinValid ? Number(enteredMinValue) : 0
   }
 
-  if (config.visualizationType === 'Line' && !checkLineToBarGraph()) {
+  if (config.visualizationType === 'Line' && !convertLineToBarGraph) {
     const isMinValid = isLogarithmicAxis
       ? Number(enteredMinValue) >= 0 && Number(enteredMinValue) < minValue
       : Number(enteredMinValue) < minValue
@@ -240,6 +239,10 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
     min = 0
   }
 
+  if (config.visualizationType === 'Scatter Plot') {
+    max = max * 1.1
+  }
+
   return { min, max, leftMax, rightMax }
 }
 export default useMinMax

package/src/hooks/useReduceData.ts

@@ -11,7 +11,7 @@ function useReduceData(config, data) {
   }
   const getMaxValueFromData = () => {
     let max = Math.max(
-      ...data.map(d =>
+      ...data?.map(d =>
         Math.max(
           ...config.runtime.seriesKeys.map(key => {
             const seriesKey = getSeriesKey(key)

package/src/hooks/useScales.ts

@@ -136,6 +136,16 @@ const useScales = (properties: useScaleProps) => {
       })
       xScale.type = scaleTypes.LINEAR
     }
+    if (xAxis.type === 'categorical') {
+      // Map items to rounded numbers if numeric, skip formatting  non-numeric strings.
+      const xAxisDataMappedRoundedItems = xAxisDataMapped.map(item => {
+        const strItem = String(item)
+        const parsed = parseFloat(strItem)
+        return !isNaN(parsed) ? Math.round(parsed).toString() : strItem
+      })
+
+      xScale = composeScaleBand(xAxisDataMappedRoundedItems, [0, xMax], 1 - config.barThickness)
+    }
   }
 
   // handle Box plot

package/src/hooks/useTooltip.tsx

@@ -143,11 +143,19 @@ export const useTooltip = props => {
       })
 
       if (visualizationType === 'Pie') {
+        const roundTo = Number(config.dataFormat.roundTo) || 0
+
+        const degrees = ((arc.endAngle - arc.startAngle) * 180) / Math.PI
+
+        // Calculate the percentage of the full circle (360 degrees)
+        const percentageOfCircle = (degrees / 360) * 100
+        const roundedPercentage = percentageOfCircle.toFixed(roundTo)
+
         tooltipItems.push(
           // ignore
           [config.xAxis.dataKey, pieChartData],
           [config.runtime.yAxis.dataKey, formatNumber(arc?.data[config.runtime.yAxis.dataKey])],
-          ['Percent', `${Math.round((((arc?.endAngle - arc?.startAngle) * 180) / Math.PI / 360) * 100) + '%'}`]
+          ['Percent', `${roundedPercentage + '%'}`]
         )
       }
 
@@ -167,11 +175,16 @@ export const useTooltip = props => {
             ?.flatMap(seriesKey => {
               const value = resolvedScaleValues[0]?.[seriesKey]
               const formattedValue = getFormattedValue(seriesKey, value, config, getAxisPosition)
+              const seriesObjWithName = config.runtime.series.find(
+                series => series.dataKey === seriesKey && series.name !== undefined
+              )
               if (
                 (value === null || value === undefined || value === '' || formattedValue === 'N/A') &&
                 config.general.hideNullValue
               ) {
                 return []
+              } else if (seriesObjWithName && seriesObjWithName.name === '') {
+                return [['', formattedValue, getAxisPosition(seriesKey)]]
               } else {
                 return [[seriesKey, formattedValue, getAxisPosition(seriesKey)]]
               }
@@ -559,8 +572,14 @@ export const useTooltip = props => {
     if (index == 1 && config.dataFormat.onlyShowTopPrefixSuffix) {
       newValue = `${config.dataFormat.prefix}${newValue}${config.dataFormat.suffix}`
     }
+    const activeLabel = getSeriesNameFromLabel(key)
+    const displayText = activeLabel ? `${activeLabel}: ${newValue}` : newValue
 
-    return <li style={style} className='tooltip-body'>{`${getSeriesNameFromLabel(key)}: ${newValue}`}</li>
+    return (
+      <li style={style} className='tooltip-body'>
+        {displayText}
+      </li>
+    )
   }
 
   return {

package/src/index.jsx

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom/client'
 import CdcChart from './CdcChart'
 import './coreStyles_chart.scss'
 
+import '@cdc/core/styles/cove-main.scss'
 import 'react-tooltip/dist/react-tooltip.css'
 
 let isEditor = window.location.href.includes('editor=true')

package/src/scss/DataTable.scss

@@ -1,14 +1,9 @@
 .data-table-container {
-  margin: 20px 0 0;
-
   &.brush-active {
     margin: 80px 0 0;
   }
 
   width: 100%;
-  &.download-link-above {
-    margin: 0;
-  }
 }
 
 .data-table-container {

package/src/scss/main.scss

@@ -50,13 +50,6 @@
   overflow-y: auto;
 }
 
-.d-flex {
-  display: flex;
-}
-.flex-column-reverse {
-  flex-direction: column-reverse;
-}
-
 .cdc-open-viz-module.type-dashboard {
   .cdc-open-viz-module.type-chart.isEditor {
     .cdc-chart-inner-container {
@@ -140,7 +133,7 @@
   .subtext--responsive-ticks,
   .section-subtext {
     &--brush-active {
-      margin-top: 3em !important;
+      margin-top: 3rem !important;
     }
   }
 
@@ -153,34 +146,39 @@
   .legend-container {
     background: #fff;
     width: 100%;
-    padding: 15px;
     vertical-align: top;
     text-align: left;
-    border: 1px solid var(--lightGray);
+    border: 1px solid var(--cool-gray-10);
+    border-radius: 6px;
     position: relative;
 
+    h3 {
+      font-size: var(--legend-title-font-size);
+    }
+
+    p {
+      font-size: var(--legend-description-font-size);
+    }
+
+    tspan,
+    div {
+      font-size: var(--legend-item-font-size);
+    }
+
     &.border-0 {
       border: 1px solid transparent;
       padding: 0;
     }
 
     &__inner {
+      display: flex;
+      flex-direction: column;
+      row-gap: var(--space-between-legend-item-rows);
+      column-gap: var(--space-between-legend-item-columns);
       &.double-column,
       &.single-row {
         display: grid;
         grid-template-columns: 1fr 1fr;
-        grid-column-gap: 1.5em;
-      }
-
-      &.vertical-sorted {
-        display: block;
-
-        @include breakpoint(sm) {
-          column-count: 2;
-          column-width: 100%;
-        }
-        column-gap: 1.5em;
-        column-fill: balance;
       }
 
       &.single-row {
@@ -192,13 +190,16 @@
           flex-basis: auto;
         }
       }
+
+      &.double-column.reverse-items div.legend-item:last-child {
+        margin-bottom: 0.2rem !important;
+      }
     }
 
     .legend-item {
       text-align: left;
       user-select: none;
-      white-space: nowrap;
-
+      line-height: var(--legend-item-font-size);
       .visx-legend-label {
         word-wrap: break-word;
         white-space: pre-wrap;
@@ -212,27 +213,9 @@
 
     .legend-item > .legend-item {
       display: inline-block;
-      margin-right: 0.5rem;
       flex: 0 0 auto;
     }
 
-    h3 {
-      font-size: 1.3rem;
-    }
-
-    h3,
-    p {
-      margin-bottom: 0.4em;
-    }
-
-    & div.legend-item {
-      margin-bottom: 0.2em !important;
-
-      &:last-child {
-        margin: 0 !important;
-      }
-    }
-
     .legend-item {
       cursor: pointer;
       transition: 0.2s all;
@@ -241,6 +224,11 @@
         opacity: 0.5;
         transition: 0.2s all;
       }
+      &.highlighted {
+        outline: 1px solid #005ea2;
+        outline-offset: 5px;
+        border-radius: 1px;
+      }
     }
 
     &__outer {
@@ -261,10 +249,6 @@
     }
   }
 
-  .legend-container__inner.flex-column-reverse div.legend-item:last-child {
-    margin-bottom: 0.2rem !important;
-  }
-
   .dynamic-legend-list {
     // overide traditional legend item that uses !important
     .legend-item {
@@ -297,7 +281,6 @@
     align-items: center;
     font-size: 1em;
     vertical-align: middle;
-    margin-bottom: 0.5em;
 
     & > span {
       display: flex;
@@ -305,7 +288,7 @@
       align-items: center;
       white-space: nowrap;
       font-size: 1em;
-      margin-right: 8px;
+      margin-right: 9px;
       max-height: 1px;
     }
 
@@ -483,32 +466,6 @@
     }
   }
 
-  @include breakpointClass(xs) {
-    &.font-small {
-      font-size: 0.8em;
-
-      .chart-container > svg {
-        font-size: 12px;
-      }
-    }
-
-    &.font-medium {
-      font-size: 0.9em;
-
-      .chart-container > svg {
-        font-size: 14px;
-      }
-    }
-
-    &.font-large {
-      font-size: 1em;
-
-      .chart-container > svg {
-        font-size: 16px;
-      }
-    }
-  }
-
   @include breakpointClass(sm) {
     .chart-container {
       .no-wrap {
@@ -547,48 +504,6 @@
         }
       }
     }
-
-    &.font-small {
-      font-size: 0.9em;
-
-      .chart-container > svg {
-        font-size: 14px;
-      }
-    }
-
-    &.font-large {
-      font-size: 1.1em;
-
-      .chart-container > svg {
-        font-size: 18px;
-      }
-    }
-  }
-
-  @include breakpointClass(lg) {
-    &.font-small {
-      font-size: 1em;
-
-      .chart-container > svg {
-        font-size: 16px;
-      }
-    }
-
-    &.font-medium {
-      font-size: 1.1em;
-
-      .chart-container > svg {
-        font-size: 18px;
-      }
-    }
-
-    &.font-large {
-      font-size: 1.2em;
-
-      .chart-container > svg {
-        font-size: 20px;
-      }
-    }
   }
 
   [tabindex]:focus-visible {