@cdc/chart 4.25.11 → 4.26.2

package/src/components/Axis/README.md

@@ -0,0 +1,94 @@
+# Axis Components
+
+This folder contains extracted axis components from `LinearChart.tsx` to improve maintainability and reduce complexity.
+
+## Components
+
+### LeftAxis
+**File:** `LeftAxis.tsx`
+
+Renders the left (Y) axis for vertical charts. Handles:
+- Tick formatting and positioning
+- Labels above gridlines option
+- Inline label (suffix) display
+- Forest plot special rendering
+
+**Props:**
+- `yScale` - D3 scale for Y axis
+- `xScale` - D3 scale for X axis
+- `yMax`, `xMax` - Chart dimensions
+- `yAxisWidth` - Width allocated for Y axis
+- `numTicks` - Number of ticks to display
+- `handleLeftTickFormatting` - Tick format function
+
+### LeftAxisGridlines
+**File:** `LeftAxisGridlines.tsx`
+
+Renders horizontal gridlines separately from the axis itself. This separation allows gridlines to be drawn behind the visualization while the axis is drawn on top.
+
+### BottomAxis
+**File:** `BottomAxis.tsx`
+
+Renders the bottom (X) axis. Handles:
+- Date/time formatting
+- Tick rotation for responsive layouts
+- Manual step configuration
+- Brush integration
+
+**Props:**
+- `xScale` - D3 scale for X axis
+- `yMax` - Chart height
+- `xTickCount` - Number of ticks
+- `handleBottomTickFormatting` - Tick format function
+- `useDateSpanMonths` - Date range calculation flag
+
+### PairedBarAxis
+**File:** `PairedBarAxis.tsx`
+
+Specialized axis for Paired Bar charts with two mirrored AxisBottom components. Handles:
+- Dual scale rendering (g1xScale, g2xScale)
+- Responsive tick rotation
+- Tick overlap detection
+
+### RightAxis
+**File:** `RightAxis.tsx`
+
+Renders the right (Y) axis for dual-axis charts. Handles:
+- Secondary Y scale
+- Configurable tick/label colors
+- Optional gridlines from right axis
+
+### CategoricalYAxis
+**File:** `Categorical.Axis.tsx`
+
+Specialized Y axis for categorical data types.
+
+## Constants
+**File:** `axis.constants.ts`
+
+Shared constants used across axis components.
+
+## Usage
+
+All components are exported from `index.ts`:
+
+```tsx
+import {
+  LeftAxis,
+  LeftAxisGridlines,
+  BottomAxis,
+  PairedBarAxis,
+  RightAxis,
+  CategoricalYAxis
+} from './Axis'
+```
+
+## Architecture Notes
+
+These components were extracted from `LinearChart.tsx` as part of a refactoring effort to:
+1. Reduce the main component from 1,704 to ~845 lines
+2. Improve testability through smaller, focused components
+3. Enable reuse across different chart types
+4. Simplify maintenance and debugging
+
+Each component accesses the `ConfigContext` for chart configuration rather than receiving all config as props, keeping the prop interfaces focused on rendering-specific data.

package/src/components/Axis/RightAxis.tsx

@@ -0,0 +1,108 @@
+import React, { useContext } from 'react'
+import { AxisRight as VisxAxisRight } from '@visx/axis'
+import { Group } from '@visx/group'
+import { Line } from '@visx/shape'
+import { Text } from '@visx/text'
+import { ScaleLinear } from 'd3-scale'
+
+import ConfigContext from '../../ConfigContext'
+
+// Constants
+const HORIZONTAL_TICK_OFFSET_ADJUSTMENT = 5
+
+type RightAxisProps = {
+  yScaleRight: ScaleLinear<number, number>
+  yMax: number
+  xMax: number
+  yAxisWidth: number
+  tickLabelFontSize: number
+  axisLabelFontSize: number
+}
+
+/**
+ * Right Y-axis component for dual-axis charts.
+ * Renders a secondary y-axis on the right side with configurable styling.
+ * Extracted from LinearChart.tsx
+ */
+export const RightAxis: React.FC<RightAxisProps> = ({
+  yScaleRight,
+  yMax,
+  xMax,
+  yAxisWidth,
+  tickLabelFontSize,
+  axisLabelFontSize
+}) => {
+  const { config, formatNumber } = useContext(ConfigContext)
+  const { runtime } = config
+
+  const horizontalTickOffset = (ticks: any[]) =>
+    yMax / ticks.length / 2 - (yMax / ticks.length) * (1 - config.barThickness) + HORIZONTAL_TICK_OFFSET_ADJUSTMENT
+
+  return (
+    <VisxAxisRight
+      scale={yScaleRight}
+      left={yAxisWidth + xMax}
+      label={config.yAxis.rightLabel}
+      tickFormat={tick => formatNumber(tick, 'right')}
+      numTicks={runtime.yAxis.rightNumTicks || undefined}
+      labelOffset={45}
+    >
+      {props => {
+        const axisCenter =
+          config.orientation === 'horizontal'
+            ? (props.axisToPoint.y - props.axisFromPoint.y) / 2
+            : (props.axisFromPoint.y - props.axisToPoint.y) / 2
+
+        return (
+          <Group className='right-axis'>
+            {props.ticks.map((tick, i) => (
+              <Group key={`vx-tick-${tick.value}-${i}`} className='vx-axis-tick'>
+                {!runtime.yAxis.rightHideTicks && (
+                  <Line
+                    from={tick.from}
+                    to={tick.to}
+                    display={runtime.horizontal ? 'none' : 'block'}
+                    stroke={config.yAxis.rightAxisTickColor}
+                  />
+                )}
+
+                {runtime.yAxis.rightGridLines && (
+                  <Line from={{ x: tick.from.x + xMax, y: tick.from.y }} to={tick.from} stroke='#d6d6d6' />
+                )}
+
+                {!config.yAxis.rightHideLabel && (
+                  <Text
+                    x={tick.to.x}
+                    y={tick.to.y + (runtime.horizontal ? horizontalTickOffset(props.ticks) : 0)}
+                    verticalAnchor={runtime.horizontal ? 'start' : 'middle'}
+                    textAnchor='start'
+                    fill={config.yAxis.rightAxisTickLabelColor}
+                    fontSize={tickLabelFontSize}
+                  >
+                    {tick.formattedValue}
+                  </Text>
+                )}
+              </Group>
+            ))}
+
+            {!config.yAxis.rightHideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
+
+            <Text
+              className='y-label'
+              textAnchor='middle'
+              verticalAnchor='start'
+              transform={`translate(${config.yAxis.rightLabelOffsetSize || 0}, ${axisCenter}) rotate(-90)`}
+              fontWeight='bold'
+              fill={config.yAxis.rightAxisLabelColor}
+              fontSize={axisLabelFontSize}
+            >
+              {props.label}
+            </Text>
+          </Group>
+        )
+      }}
+    </VisxAxisRight>
+  )
+}
+
+export default RightAxis

package/src/components/Axis/axis.constants.ts

@@ -0,0 +1,21 @@
+// Tick length constants
+export const DEFAULT_TICK_LENGTH = 8
+export const LOGARITHMIC_TICK_LENGTH = 6
+export const MAJOR_LOG_TICK_LENGTH = 7
+
+// Tick styling constants
+export const TICK_LABEL_MARGIN_RIGHT = 4.5
+export const MAJOR_LOG_TICK_STROKE_WIDTH = 1.3
+
+// Label positioning constants
+export const VALUE_ON_LINE_PADDING_NO_AXIS = -8
+export const VALUE_ON_LINE_PADDING_WITH_AXIS = -12
+export const LABEL_Y_PADDING_ABOVE_GRIDLINES = 4
+export const HORIZONTAL_TICK_OFFSET_ADJUSTMENT = 5
+
+// Chart-specific constants
+export const ZERO_LINE_STROKE_WIDTH = 2
+export const BAR_MIN_HEIGHT = 15
+
+// Lollipop chart sizes
+export const LOLLIPOP_SIZES = { large: 7, medium: 6, small: 5 } as const

package/src/components/Axis/index.ts

@@ -0,0 +1,7 @@
+export { default as CategoricalYAxis } from './Categorical.Axis'
+export { default as LeftAxis } from './LeftAxis'
+export { default as LeftAxisGridlines } from './LeftAxisGridlines'
+export { default as BottomAxis } from './BottomAxis'
+export { default as PairedBarAxis } from './PairedBarAxis'
+export { default as RightAxis } from './RightAxis'
+export * from './axis.constants'

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

@@ -13,7 +13,6 @@ import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 // CDC core components and helpers
 import { getColorContrast, getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
-import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { getBarConfig, testZeroValue, getLollipopStemColor, getLollipopHeadColor } from '../helpers'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
@@ -36,6 +35,7 @@ const BarChartHorizontal = () => {
     isLabelBelowBar,
     lollipopBarWidth,
     lollipopShapeSize,
+    labelFontSize,
     getHighlightedBarColorByValue,
     getHighlightedBarByValue,
     getAdditionalColumn,
@@ -59,8 +59,6 @@ const BarChartHorizontal = () => {
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
-  const LABEL_FONT_SIZE = isMobileFontViewport(vizViewport) ? 13 : 16
-
   const hasConfidenceInterval = [config.confidenceKeys?.upper, config.confidenceKeys?.lower].every(
     v => v != null && String(v).trim() !== ''
   )
@@ -209,7 +207,7 @@ const BarChartHorizontal = () => {
                     isVertical: false,
                     yAxisValue,
                     barWidth: 0,
-                    labelFontSize: LABEL_FONT_SIZE
+                    labelFontSize: labelFontSize
                   })
 
                   const barPosition = !isPositiveBar ? 'below' : 'above'
@@ -217,7 +215,7 @@ const BarChartHorizontal = () => {
                   const barDefaultLabel = !config.yAxis.displayNumbersOnBar || absentDataLabel ? '' : yAxisValue
 
                   // check if bar text/value string fits into  each bars.
-                  const textWidth = getTextWidth(barDefaultLabel)
+                  const textWidth = getTextWidth(barDefaultLabel, `normal ${labelFontSize}px sans-serif`)
                   const textFits = Number(textWidth) < defaultBarWidth - 5
 
                   // control text position
@@ -447,7 +445,7 @@ const BarChartHorizontal = () => {
                           return (
                             <Text // prettier-ignore
                               key={index}
-                              fontSize={LABEL_FONT_SIZE}
+                              fontSize={labelFontSize}
                               display={displayBar ? 'block' : 'none'}
                               opacity={transparentBar ? 0.5 : 1}
                               x={barX}
@@ -473,6 +471,7 @@ const BarChartHorizontal = () => {
                             dx={textPadding}
                             verticalAnchor='middle'
                             textAnchor={textAnchor}
+                            fontSize={labelFontSize}
                           >
                             {testZeroValue(bar.value) ? '' : barDefaultLabel}
                           </Text>
@@ -488,6 +487,7 @@ const BarChartHorizontal = () => {
                             dx={-textPadding}
                             verticalAnchor='middle'
                             textAnchor={bar.value < 0 ? 'end' : 'start'}
+                            fontSize={labelFontSize}
                           >
                             {testZeroValue(bar.value) ? '' : barDefaultLabel}
                           </Text>
@@ -496,12 +496,17 @@ const BarChartHorizontal = () => {
                           display={displayBar ? 'block' : 'none'}
                           x={bar.y}
                           opacity={transparentBar ? 0.5 : 1}
-                          y={config.barHeight / 2 + config.barHeight * bar.index}
+                          y={
+                            config.isLollipopChart
+                              ? barHeight * bar.index + lollipopBarWidth / 2
+                              : config.barHeight / 2 + config.barHeight * bar.index
+                          }
                           fill={labelColor}
                           dx={absentDataLabel === 'N/A' ? 20 : textPadding}
-                          dy={config.isLollipopChart ? -10 : 0}
+                          dy={0}
                           verticalAnchor='middle'
                           textAnchor={absentDataLabel === 'N/A' ? 'middle' : textAnchor}
+                          fontSize={labelFontSize}
                         >
                           {absentDataLabel}
                         </Text>
@@ -510,31 +515,180 @@ const BarChartHorizontal = () => {
                           <Text // prettier-ignore
                             display={displayBar ? 'block' : 'none'}
                             x={bar.y}
-                            y={0}
+                            y={barHeight * bar.index + lollipopBarWidth / 2}
                             fill={APP_FONT_COLOR}
                             dx={textPaddingLollipop}
                             textAnchor={textAnchorLollipop}
                             verticalAnchor='middle'
                             fontWeight={'normal'}
+                            fontSize={labelFontSize}
                           >
                             {testZeroValue(bar.value) ? '' : barDefaultLabel}
                           </Text>
                         )}
-                        {isLabelBelowBar && !config.yAxis.hideLabel && (
-                          <Text
-                            x={config.yAxis.hideAxis ? 0 : 5}
-                            y={barGroup.height}
-                            dy={4}
-                            verticalAnchor={'start'}
-                            textAnchor={'start'}
-                          >
-                            {config.runtime.yAxis.type === 'date'
-                              ? formatDate(parseDate(dataValue))
-                              : isHorizontal
-                              ? dataValue
-                              : formatNumber(dataValue)}
-                          </Text>
-                        )}
+                        {isLabelBelowBar &&
+                          !config.yAxis.hideLabel &&
+                          (() => {
+                            const label =
+                              config.runtime.yAxis.type === 'date'
+                                ? formatDate(parseDate(dataValue))
+                                : isHorizontal
+                                ? dataValue
+                                : formatNumber(dataValue)
+                            if (typeof label === 'string') {
+                              // 1. Check for HTML <a> tag and extract its text and href
+                              const aTagMatch = label.match(/<a [^>]*href=["']?([^"'>\s]+)["']?[^>]*>(.*?)<\/a>/i)
+                              if (aTagMatch) {
+                                const href = aTagMatch[1].startsWith('http') ? aTagMatch[1] : `https://${aTagMatch[1]}`
+                                const linkText = aTagMatch[2]
+                                return (
+                                  <foreignObject
+                                    x={config.yAxis.hideAxis ? 0 : 5}
+                                    y={barGroup.height}
+                                    width={120}
+                                    height={24}
+                                    style={{ overflow: 'visible' }}
+                                  >
+                                    <a
+                                      href={href}
+                                      target='_blank'
+                                      rel='noopener noreferrer'
+                                      style={
+                                        config.tooltips.singleSeries
+                                          ? {
+                                              color: '#0071bc',
+                                              textDecoration: 'underline',
+                                              fontSize: 12,
+                                              fontFamily: 'inherit',
+                                              display: 'inline-block',
+                                              width: '100%'
+                                            }
+                                          : {
+                                              color: 'inherit',
+                                              textDecoration: 'none',
+                                              fontSize: 12,
+                                              fontFamily: 'inherit',
+                                              display: 'inline-block',
+                                              width: '100%'
+                                            }
+                                      }
+                                    >
+                                      {linkText}
+                                    </a>
+                                  </foreignObject>
+                                )
+                              }
+                              // 2. Check for markdown link
+                              const mdMatch = label.match(/\[([^\]]+)\]\((https?:\/\/[^\s]+|www\.[^\s]+)\)/i)
+                              if (mdMatch) {
+                                const href = mdMatch[2].startsWith('http') ? mdMatch[2] : `https://${mdMatch[2]}`
+                                const linkText = mdMatch[1]
+                                return (
+                                  <foreignObject
+                                    x={config.yAxis.hideAxis ? 0 : 5}
+                                    y={barGroup.height}
+                                    width={120}
+                                    height={24}
+                                    style={{ overflow: 'visible' }}
+                                  >
+                                    <a
+                                      href={href}
+                                      target='_blank'
+                                      rel='noopener noreferrer'
+                                      style={
+                                        config.tooltips.singleSeries
+                                          ? {
+                                              color: '#0071bc',
+                                              textDecoration: 'underline',
+                                              fontSize: 12,
+                                              fontFamily: 'inherit',
+                                              display: 'inline-block',
+                                              width: '100%'
+                                            }
+                                          : {
+                                              color: 'inherit',
+                                              textDecoration: 'none',
+                                              fontSize: 12,
+                                              fontFamily: 'inherit',
+                                              display: 'inline-block',
+                                              width: '100%'
+                                            }
+                                      }
+                                    >
+                                      {linkText}
+                                    </a>
+                                  </foreignObject>
+                                )
+                              }
+                              // 3. Check for plain URL
+                              if (/(https?:\/\/|www\.)/i.test(label)) {
+                                try {
+                                  const urlObj = new URL(label.startsWith('http') ? label : `https://${label}`)
+                                  const linkText = urlObj.hostname.replace(/^www\./, '')
+                                  return (
+                                    <foreignObject
+                                      x={config.yAxis.hideAxis ? 0 : 5}
+                                      y={barGroup.height}
+                                      width={120}
+                                      height={24}
+                                      style={{ overflow: 'visible' }}
+                                    >
+                                      <a
+                                        href={urlObj.href}
+                                        target='_blank'
+                                        rel='noopener noreferrer'
+                                        style={
+                                          config.tooltips.singleSeries
+                                            ? {
+                                                color: '#0071bc',
+                                                textDecoration: 'underline',
+                                                fontSize: 12,
+                                                fontFamily: 'inherit',
+                                                display: 'inline-block',
+                                                width: '100%'
+                                              }
+                                            : {
+                                                color: 'inherit',
+                                                textDecoration: 'none',
+                                                fontSize: 12,
+                                                fontFamily: 'inherit',
+                                                display: 'inline-block',
+                                                width: '100%'
+                                              }
+                                        }
+                                      >
+                                        {linkText}
+                                      </a>
+                                    </foreignObject>
+                                  )
+                                } catch {
+                                  return (
+                                    <Text
+                                      x={config.yAxis.hideAxis ? 0 : 5}
+                                      y={barGroup.height}
+                                      dy={4}
+                                      verticalAnchor={'start'}
+                                      textAnchor={'start'}
+                                    >
+                                      {label}
+                                    </Text>
+                                  )
+                                }
+                              }
+                            }
+                            // Not a link, render as normal
+                            return (
+                              <Text
+                                x={config.yAxis.hideAxis ? 0 : 5}
+                                y={barGroup.height}
+                                dy={4}
+                                verticalAnchor={'start'}
+                                textAnchor={'start'}
+                              >
+                                {label}
+                              </Text>
+                            )
+                          })()}
 
                         {config.isLollipopChart && config.lollipopShape === 'circle' && (
                           <circle

package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx

@@ -38,6 +38,7 @@ const BarChartStackedHorizontal = () => {
     hoveredBar,
     isHorizontal,
     isLabelBelowBar,
+    labelFontSize,
     onMouseLeaveBar,
     onMouseOverBar,
     barStackedSeriesKeys
@@ -155,7 +156,7 @@ const BarChartStackedHorizontal = () => {
                 const yAxisTooltip = config.runtime.yAxis.label
                   ? `${config.runtime.yAxis.label}: ${yAxisValue}`
                   : yAxisValue
-                const textWidth = getTextWidth(xAxisValue)
+                const textWidth = getTextWidth(xAxisValue, `normal ${labelFontSize}px sans-serif`)
                 const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
                 const tooltip = `<ul>
@@ -286,6 +287,7 @@ const BarChartStackedHorizontal = () => {
                           fill={labelColor}
                           textAnchor='middle'
                           verticalAnchor='middle'
+                          fontSize={labelFontSize}
                         >
                           {xAxisValue}
                         </Text>

package/src/components/BarChart/components/BarChart.StackedVertical.tsx

@@ -259,6 +259,7 @@ const BarChartStackedVertical = () => {
           yMax={yMax}
           barWidth={barWidth}
           totalBarsInGroup={1}
+          xMax={xMax}
           handleTooltipMouseOff={() => {}}
           handleTooltipMouseOver={() => {}}
           handleTooltipClick={() => {}}

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

@@ -17,7 +17,6 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 import isNumber from '@cdc/core/helpers/isNumber'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
-import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 // Types
 import { type ChartContext } from '../../../types/ChartContext'
 import _ from 'lodash'
@@ -32,6 +31,7 @@ const BarChartVertical = () => {
     getAdditionalColumn,
     getHighlightedBarByValue,
     getHighlightedBarColorByValue,
+    labelFontSize,
     lollipopBarWidth,
     lollipopShapeSize,
     onMouseLeaveBar,
@@ -59,8 +59,6 @@ const BarChartVertical = () => {
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
-  const LABEL_FONT_SIZE = isMobileFontViewport(vizViewport) ? 13 : 16
-
   const root = document.documentElement
 
   let data = transformedData
@@ -242,7 +240,7 @@ const BarChartVertical = () => {
                     barWidth,
                     isVertical: true,
                     yAxisValue,
-                    labelFontSize: LABEL_FONT_SIZE
+                    labelFontSize: labelFontSize
                   })
                   // configure colors
                   let labelColor = APP_FONT_COLOR
@@ -481,7 +479,7 @@ const BarChartVertical = () => {
                               verticalAnchor={verticalAnchor}
                               fill={fillColor}
                               textAnchor='middle'
-                              fontSize={LABEL_FONT_SIZE}
+                              fontSize={labelFontSize}
                             >
                               {pd.iconCode}
                             </Text>
@@ -494,7 +492,7 @@ const BarChartVertical = () => {
                           y={barY - BAR_LABEL_PADDING}
                           fill={labelColor}
                           textAnchor='middle'
-                          fontSize={LABEL_FONT_SIZE}
+                          fontSize={labelFontSize}
                         >
                           {testZeroValue(bar.value) ? '' : barDefaultLabel}
                         </Text>
@@ -505,7 +503,7 @@ const BarChartVertical = () => {
                           y={barY - BAR_LABEL_PADDING}
                           fill={labelColor}
                           textAnchor='middle'
-                          fontSize={config.isLollipopChart ? null : LABEL_FONT_SIZE}
+                          fontSize={config.isLollipopChart ? null : labelFontSize}
                         >
                           {absentDataLabel}
                         </Text>
@@ -568,7 +566,7 @@ const BarChartVertical = () => {
           }}
         </BarGroup>
 
-        <Regions xScale={xScale} yMax={yMax} barWidth={barWidth} totalBarsInGroup={totalBarsInGroup} />
+        <Regions xScale={xScale} yMax={yMax} barWidth={barWidth} totalBarsInGroup={totalBarsInGroup} xMax={xMax} />
       </Group>
     )
   )

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

@@ -18,6 +18,7 @@ type BarChartProps = {
   seriesScale: PositionScale
   xMax: number
   yMax: number
+  yAxisWidth?: number
   handleTooltipMouseOver: MouseEventHandler<SVGRectElement>
   handleTooltipMouseOff: MouseEventHandler<SVGRectElement>
   handleTooltipClick: MouseEventHandler<SVGRectElement>
@@ -29,6 +30,7 @@ const BarChart: React.FC<BarChartProps> = ({
   seriesScale,
   xMax,
   yMax,
+  yAxisWidth,
   handleTooltipMouseOver,
   handleTooltipMouseOff,
   handleTooltipClick
@@ -47,10 +49,14 @@ const BarChart: React.FC<BarChartProps> = ({
     barChart
   }
 
+  // Use yAxisWidth prop if provided (for horizontal bar charts with dynamic labels)
+  // otherwise fall back to config value
+  const leftOffset = yAxisWidth ?? parseFloat(config.runtime.yAxis.size)
+
   return (
     <ErrorBoundary component='BarChart'>
       <BarChartContext.Provider value={contextValues}>
-        <Group left={parseFloat(config.runtime.yAxis.size)}>
+        <Group left={leftOffset}>
           <BarChartType.StackedVertical />
           <BarChartType.StackedHorizontal />
           <BarChartType.Vertical />

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

@@ -18,6 +18,7 @@ export type BarChartContextValues = {
     getHighlightedBarColorByValue: Function
     lollipopBarWidth: number
     lollipopShapeSize: number
+    labelFontSize: number
     onMouseLeaveBar: Function
     onMouseOverBar: Function
     section: string