@cdc/chart 4.24.7 → 4.24.9-1

package/src/_stories/Chart.Legend.Gradient.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import chartGradientConfig from './_mock/legend.gradient_mock.json'
+
+import Chart from '../CdcChart'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Legend',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Legend_gradient: Story = {
+  args: {
+    config: chartGradientConfig
+  }
+}
+
+export default meta

package/src/_stories/_mock/legend.gradient_mock.json

@@ -0,0 +1,236 @@
+{
+  "annotations": [],
+  "type": "chart",
+  "debugSvg": false,
+  "chartMessage": { "noData": "No Data Available" },
+  "title": "Combo Bar-Line Chart",
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "theme": "theme-purple",
+  "animate": false,
+  "fontSize": "medium",
+  "lineDatapointStyle": "hover",
+  "lineDatapointColor": "Same as Line",
+  "barHasBorder": "false",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "regular",
+  "barStyle": "flat",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "isResponsiveTicks": false,
+  "general": { "annotationDropdownText": "Annotations", "showDownloadButton": false, "showMissingDataLabel": true, "showSuppressedSymbol": true, "showZeroValueDataLabel": true },
+  "padding": { "left": 5, "right": 5 },
+  "preliminaryData": [],
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "68",
+    "gridLines": true,
+    "enablePadding": false,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "rightHideAxis": true,
+    "rightAxisSize": 50,
+    "rightLabel": "",
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "numTicks": "",
+    "axisPadding": 0,
+    "scalePadding": 10,
+    "tickRotation": 0,
+    "anchors": [],
+    "shoMissingDataLabel": true,
+    "showMissingDataLine": true,
+    "categories": [],
+    "label": "Y-Axis Label Example",
+    "maxValue": 1000
+  },
+  "boxplot": {
+    "plots": [],
+    "borders": "true",
+    "firstQuartilePercentage": 25,
+    "thirdQuartilePercentage": 75,
+    "boxWidthPercentage": 40,
+    "plotOutlierValues": false,
+    "plotNonOutlierValues": true,
+    "legend": { "showHowToReadText": false, "howToReadText": "" },
+    "labels": { "q1": "Lower Quartile", "q2": "q2", "q3": "Upper Quartile", "q4": "q4", "minimum": "Minimum", "maximum": "Maximum", "mean": "Mean", "median": "Median", "sd": "Standard Deviation", "iqr": "Interquartile Range", "total": "Total", "outliers": "Outliers", "values": "Values" }
+  },
+  "topAxis": { "hasLine": false },
+  "isLegendValue": false,
+  "barThickness": 0.35,
+  "barHeight": 25,
+  "barSpace": 15,
+  "heights": { "vertical": 300, "horizontal": 750 },
+  "xAxis": {
+    "sortDates": false,
+    "anchors": [],
+    "type": "date-time",
+    "showTargetLabel": true,
+    "targetLabel": "Target",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "78",
+    "tickRotation": "25",
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 65,
+    "axisPadding": 0,
+    "target": 0,
+    "maxTickRotation": 0,
+    "dataKey": "Date",
+    "label": "X-Axis Example Label",
+    "dateParseFormat": "%m/%d/%Y",
+    "dateDisplayFormat": "%m/%d/%Y",
+    "tickWidthMax": 91,
+    "padding": 6,
+    "axisBBox": 164.5282745361328
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "indexLabel": "",
+    "download": true,
+    "showVertical": false,
+    "dateDisplayFormat": "",
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "show": true
+  },
+  "orientation": "vertical",
+  "color": "pinkpurple",
+  "columns": {},
+  "legend": {
+    "hide": false,
+    "behavior": "highlight",
+    "axisAlign": true,
+    "singleRow": false,
+    "colorCode": "",
+    "reverseLabelOrder": false,
+    "description": "",
+    "dynamicLegend": false,
+    "dynamicLegendDefaultText": "Show All",
+    "dynamicLegendItemLimit": 5,
+    "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
+    "dynamicLegendChartMessage": "Select Options from the Legend",
+    "label": "",
+    "lineMode": false,
+    "verticalSorted": false,
+    "highlightOnHover": false,
+    "hideSuppressedLabels": false,
+    "seriesHighlight": [],
+    "style": "gradient",
+    "subStyle": "smooth",
+    "hasBorder": true,
+    "tickRotation": "0",
+    "position": "top"
+  },
+  "brush": {
+    "height": 25,
+    "active": false,
+    "data": [
+      { "Date": "1/15/2016", "Data 1": "1000", "Data 2": "110", "Data 3": "100", "Data 4": "90", "Monthly-Goal": "100" },
+      { "Date": "2/15/2016", "Data 1": "100", "Data 2": "110", "Data 3": "100", "Data 4": "100", "Monthly-Goal": "100" },
+      { "Date": "3/15/2016", "Data 1": "80", "Data 2": "90", "Data 3": "100", "Data 4": "120", "Monthly-Goal": "110" },
+      { "Date": "4/15/2016", "Data 1": "80", "Data 2": "90", "Data 3": "110", "Data 4": "120", "Monthly-Goal": "110" },
+      { "Date": "5/15/2016", "Data 1": "70", "Data 2": "90", "Data 3": "110", "Data 4": "130", "Monthly-Goal": "120" },
+      { "Date": "6/15/2016", "Data 1": "100", "Data 2": "120", "Data 3": "120", "Data 4": "130", "Monthly-Goal": "120" },
+      { "Date": "7/15/2016", "Data 1": "110", "Data 2": "140", "Data 3": "120", "Data 4": "130", "Monthly-Goal": "130" },
+      { "Date": "8/15/2016", "Data 1": "110", "Data 2": "130", "Data 3": "120", "Data 4": "140", "Monthly-Goal": "130" },
+      { "Date": "9/15/2016", "Data 1": "120", "Data 2": "130", "Data 3": "120", "Data 4": "150", "Monthly-Goal": "140" }
+    ]
+  },
+  "exclusions": { "active": false, "keys": [] },
+  "palette": "sequential-blue",
+  "isPaletteReversed": false,
+  "twoColor": { "palette": "monochrome-1", "isPaletteReversed": false },
+  "labels": false,
+  "dataFormat": { "commas": false, "prefix": "", "suffix": "", "abbreviated": false, "bottomSuffix": "", "bottomPrefix": "", "bottomAbbreviated": false },
+  "confidenceKeys": {},
+  "visual": { "border": true, "accent": true, "background": true, "verticalHoverLine": false, "horizontalHoverLine": false },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "highlightedBarValues": [],
+  "series": [
+    { "dataKey": "Data 2", "type": "Bar", "axis": "Left", "tooltip": true },
+    { "dataKey": "Data 1", "type": "Bar", "axis": "Left", "tooltip": true },
+    { "dataKey": "Data 3", "type": "Bar", "axis": "Left", "tooltip": true }
+  ],
+  "tooltips": { "opacity": 90, "singleSeries": false, "dateDisplayFormat": "" },
+  "forestPlot": {
+    "startAt": 0,
+    "colors": { "line": "", "shape": "" },
+    "lineOfNoEffect": { "show": true },
+    "type": "",
+    "pooledResult": { "diamondHeight": 5, "column": "" },
+    "estimateField": "",
+    "estimateRadius": "",
+    "shape": "",
+    "rowHeight": 20,
+    "description": { "show": true, "text": "description", "location": 0 },
+    "result": { "show": true, "text": "result", "location": 100 },
+    "radius": { "min": 1, "max": 8, "scalingColumn": "" },
+    "regression": { "lower": 0, "upper": 0, "estimateField": 0 },
+    "leftWidthOffset": 0,
+    "rightWidthOffset": 0,
+    "showZeroLine": false,
+    "leftLabel": "",
+    "rightLabel": "",
+    "hideDateCategoryCol": false
+  },
+  "area": { "isStacked": false },
+  "sankey": {
+    "title": { "defaultColor": "black" },
+    "iterations": 1,
+    "rxValue": 0.9,
+    "overallSize": { "width": 900, "height": 700 },
+    "margin": { "margin_y": 25, "margin_x": 0 },
+    "nodeSize": { "nodeWidth": 26, "nodeHeight": 40 },
+    "nodePadding": 55,
+    "nodeFontColor": "black",
+    "nodeColor": { "default": "#ff8500", "inactive": "#808080" },
+    "linkColor": { "default": "#ffc900", "inactive": "#D3D3D3" },
+    "opacity": { "nodeOpacityDefault": 1, "nodeOpacityInactive": 0.1, "LinkOpacityDefault": 1, "LinkOpacityInactive": 0.1 },
+    "storyNodeFontColor": "#006778",
+    "storyNodeText": [],
+    "nodeValueStyle": { "textBefore": "(", "textAfter": ")" },
+    "data": []
+  },
+  "suppressedData": [],
+  "height": "332",
+  "data": [
+    { "Date": "1/15/2016", "Data 1": "$1,000", "Data 2": "110", "Data 3": "100", "Data 4": "90", "Monthly-Goal": "100" },
+    { "Date": "2/15/2016", "Data 1": "100", "Data 2": "110", "Data 3": "100", "Data 4": "100", "Monthly-Goal": "100" },
+    { "Date": "3/15/2016", "Data 1": "80", "Data 2": "90", "Data 3": "100", "Data 4": "120", "Monthly-Goal": "110" },
+    { "Date": "4/15/2016", "Data 1": "80", "Data 2": "90", "Data 3": "110", "Data 4": "120", "Monthly-Goal": "110" },
+    { "Date": "5/15/2016", "Data 1": "70", "Data 2": "90", "Data 3": "110", "Data 4": "130", "Monthly-Goal": "120" },
+    { "Date": "6/15/2016", "Data 1": "100", "Data 2": "120", "Data 3": "120", "Data 4": "130", "Monthly-Goal": "120" },
+    { "Date": "7/15/2016", "Data 1": "110", "Data 2": "140", "Data 3": "120", "Data 4": "130", "Monthly-Goal": "130" },
+    { "Date": "8/15/2016", "Data 1": "110", "Data 2": "130", "Data 3": "120", "Data 4": "140", "Monthly-Goal": "130" },
+    { "Date": "9/15/2016", "Data 1": "120", "Data 2": "130", "Data 3": "120", "Data 4": "150", "Monthly-Goal": "140" }
+  ],
+  "visualizationType": "Bar",
+  "filters": [],
+  "validated": 4.23,
+  "dynamicMarginTop": 0,
+  "version": "4.24.9"
+}

package/src/components/Annotations/components/AnnotationDraggable.tsx

@@ -90,9 +90,17 @@ const Annotations = ({ xScale, yScale, xScaleAnnotation, xMax, svgRef, onDragSta
                   props.x
                 )
 
-                updatedAnnotations[index] = { ...updatedAnnotations[index], x: xScaleAnnotation.invert(xScale(nearestDatum.x)), y: yScale(nearestDatum.y) }
+                updatedAnnotations[index] = {
+                  ...updatedAnnotations[index],
+                  x: xScaleAnnotation.invert(xScale(nearestDatum.x)),
+                  y: yScale(nearestDatum.y)
+                }
               } else {
-                updatedAnnotations[index] = { ...updatedAnnotations[index], x: xScaleAnnotation.invert(props.x), y: props.y }
+                updatedAnnotations[index] = {
+                  ...updatedAnnotations[index],
+                  x: xScaleAnnotation.invert(props.x),
+                  y: props.y
+                }
               }
             }
 
@@ -102,7 +110,12 @@ const Annotations = ({ xScale, yScale, xScaleAnnotation, xMax, svgRef, onDragSta
             })
           }}
         >
-          <HtmlLabel className='annotation__desktop-label' showAnchorLine={false} horizontalAnchor={handleConnectionHorizontalType(annotation, xScale, config)} verticalAnchor={handleConnectionVerticalType(annotation, xScale, config)}>
+          <HtmlLabel
+            className='annotation__desktop-label'
+            showAnchorLine={false}
+            horizontalAnchor={handleConnectionHorizontalType(annotation, xScale, config)}
+            verticalAnchor={handleConnectionVerticalType(annotation, xScale, config)}
+          >
             <div
               style={{
                 borderRadius: 5, // Optional: set border radius
@@ -113,7 +126,7 @@ const Annotations = ({ xScale, yScale, xScaleAnnotation, xMax, svgRef, onDragSta
                 justifyContent: 'start',
                 flexDirection: 'row'
               }}
-              role='presentation'
+              // role='presentation'
               tabIndex={0}
               aria-label={`Annotation text that reads: ${annotation.text}`}
             >
@@ -127,22 +140,62 @@ const Annotations = ({ xScale, yScale, xScaleAnnotation, xMax, svgRef, onDragSta
               <div style={{ fontSize: fontSizes[config.fontSize] }} dangerouslySetInnerHTML={sanitizedData()} />
             </div>
           </HtmlLabel>
-          {annotation.connectionType === 'line' && <Connector type='line' pathProps={{ markerStart: `url(#marker-start--${index})` }} />}
-          {annotation.connectionType === 'elbow' && <Connector type='elbow' pathProps={{ markerStart: `url(#marker-start--${index})` }} />}
+          {annotation.connectionType === 'line' && (
+            <Connector type='line' pathProps={{ markerStart: `url(#marker-start--${index})` }} />
+          )}
+          {annotation.connectionType === 'elbow' && (
+            <Connector type='elbow' pathProps={{ markerStart: `url(#marker-start--${index})` }} />
+          )}
           {annotation.connectionType === 'curve' && (
             <LinePath
               d={`M ${annotationX},${annotation.y}
-                      Q ${annotationX + annotation.dx / 2}, ${annotation.y + annotation.dy / 2 + Number(annotation?.bezier) || 0} ${annotationX + annotation.dx},${annotation.y + annotation.dy}`}
+                      Q ${annotationX + annotation.dx / 2}, ${
+                annotation.y + annotation.dy / 2 + Number(annotation?.bezier) || 0
+              } ${annotationX + annotation.dx},${annotation.y + annotation.dy}`}
               stroke='black'
               strokeWidth='2'
               fill='none'
               marker-start={`url(#marker-start--${index})`}
             />
           )}
-          {annotation.marker === 'circle' && <CircleSubject id={`marker-start--${index}`} className='circle-subject' stroke={colorScale(annotation.seriesKey)} radius={8} />}
-          {annotation.marker === 'arrow' && <MarkerArrow fill='black' id={`marker-start--${index}`} x={annotationX} y={annotation.y} stroke='#333' markerWidth={10} size={10} strokeWidth={1} orient='auto-start-reverse' markerUnits='userSpaceOnUse' />}
-          <circle fill='white' cx={annotationX + annotation.dx} cy={annotation.y + annotation.dy} r={16} className='annotation__mobile-label annotation__mobile-label-circle' stroke={colorScale(annotation.seriesKey)} />
-          <text height={16} x={annotationX + annotation.dx} y={annotation.y + annotation.dy} className='annotation__mobile-label' alignmentBaseline='middle' textAnchor='middle'>
+          {annotation.marker === 'circle' && (
+            <CircleSubject
+              id={`marker-start--${index}`}
+              className='circle-subject'
+              stroke={colorScale(annotation.seriesKey)}
+              radius={8}
+            />
+          )}
+          {annotation.marker === 'arrow' && (
+            <MarkerArrow
+              fill='black'
+              id={`marker-start--${index}`}
+              x={annotationX}
+              y={annotation.y}
+              stroke='#333'
+              markerWidth={10}
+              size={10}
+              strokeWidth={1}
+              orient='auto-start-reverse'
+              markerUnits='userSpaceOnUse'
+            />
+          )}
+          <circle
+            fill='white'
+            cx={annotationX + annotation.dx}
+            cy={annotation.y + annotation.dy}
+            r={16}
+            className='annotation__mobile-label annotation__mobile-label-circle'
+            stroke={colorScale(annotation.seriesKey)}
+          />
+          <text
+            height={16}
+            x={annotationX + annotation.dx}
+            y={annotation.y + annotation.dy}
+            className='annotation__mobile-label'
+            alignmentBaseline='middle'
+            textAnchor='middle'
+          >
             {index + 1}
           </text>
         </AnnotationComponent>

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

@@ -0,0 +1,145 @@
+import React, { useContext } from 'react'
+import { BarStack, Line } from '@visx/shape'
+import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale'
+import { Group } from '@visx/group'
+import { Text } from '@visx/text'
+import ConfigContext from '../../ConfigContext'
+import chroma from 'chroma-js'
+import createBarElement from '@cdc/core/components/createBarElement'
+import { useBarChart } from '../../hooks/useBarChart'
+
+const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
+  const { config, getTextWidth } = useContext(ConfigContext)
+  const { fontSize } = useBarChart()
+
+  const { orientation } = config
+
+  const getValidColor = (color, defaultColor = '#f1f1f1') => {
+    try {
+      return chroma(color).hex() // Returns the color if valid
+    } catch (e) {
+      return defaultColor
+    }
+  }
+
+  const categories = config.yAxis?.categories
+
+  const createDataShape = categories => {
+    const categoryObj = [...categories].reduce((acc, item) => {
+      acc[item.label] = item.height
+      return acc
+    }, {})
+
+    return categoryObj
+  }
+  const updateCategory = categoryObj => {
+    // Get all the heights in the object
+    const heights = Object.keys(categoryObj)
+
+    // Get the last label
+    const lastheight = heights[heights.length - 1]
+
+    // Check if the last label's value is empty
+    if (categoryObj[lastheight] === '') {
+      // Calculate the sum of the numeric values of all other heights
+      const sumOfValues = heights.slice(0, -1).reduce((sum, label) => {
+        const value = parseInt(categoryObj[label], 10)
+        return sum + (isNaN(value) ? 0 : value)
+      }, 0)
+
+      // Calculate the new value for the last emty height
+      const newValue = max - sumOfValues
+
+      // Update the last height with the new value
+      categoryObj[lastheight] = newValue.toString()
+    }
+
+    return [categoryObj]
+  }
+
+  const transformedData = updateCategory(createDataShape(categories))
+
+  // Define the scales
+  const xScaleValue = 0
+
+  const xScale = scaleBand<number>({
+    domain: [xScaleValue],
+    padding: 0,
+    range: [0, leftSize]
+  })
+
+  const yScale = scaleLinear({
+    domain: [0, max],
+    range: [yMax, 0],
+    clamp: true
+  })
+
+  const colorScale = scaleOrdinal({
+    domain: categories.map(d => d?.label),
+    range: categories.map(d => getValidColor(d?.color?.trim()))
+  })
+
+  const keys = Object.keys(transformedData[0])
+  return (
+    <Group left={leftSize - xScale.bandwidth()} top={0}>
+      <BarStack data={transformedData} keys={keys} x={() => xScale(xScaleValue)} xScale={xScale} yScale={yScale} color={colorScale}>
+        {barStacks =>
+          barStacks.map(barStack =>
+            barStack.bars.map(bar => {
+              const isLastIndex = config.yAxis.categories.length - 1 === barStack.index
+              const textSize = fontSize[config.fontSize] / 1.3
+              const textColor = chroma(bar.color).luminance() < 0.4 ? '#fff' : '#000'
+              const textWidth = getTextWidth(bar.key, `normal ${textSize}px sans-serif`)
+              const displayText = Number(textWidth) < bar.width && bar.height > textSize
+              const tooltip = `<ul>
+              <li class="tooltip-heading""> Label : ${bar.key}  </li>
+                    </li></ul>`
+              return (
+                <Group key={`${barStack.index}--${bar.index}--${orientation}`}>
+                  <Group key={`bar-stack-${barStack.index}-${bar.index}`} id={`barStack${barStack.index}-${bar.index}`} className='stack vertical'>
+                    {createBarElement({
+                      type: 'axisBar',
+                      config: config,
+                      index: barStack.index,
+                      background: colorScale(bar.key),
+                      borderColor: '#333',
+                      borderStyle: 'solid',
+                      borderWidth: 0,
+                      width: xScale.bandwidth(),
+                      height: bar.height,
+                      x: bar.x,
+                      y: bar.y,
+                      tooltipHtml: tooltip,
+                      tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
+                    })}
+                    {/* Label for axis stacks */}
+                    <Text // ignore
+                      display={!displayText ? 'none' : 'block'}
+                      key={`text-${barStack.index}-${bar.index}`}
+                      x={bar.x + xScale.bandwidth() / 2}
+                      y={bar.y + bar.height / 2}
+                      fill={textColor}
+                      textAnchor='middle'
+                      verticalAnchor='middle'
+                      style={{ fontSize: textSize }}
+                    >
+                      {bar.key}
+                    </Text>
+                    {/* gridLines */}
+                    {config.runtime.yAxis.gridLines && <Line from={{ x: bar.x + xScale.bandwidth(), y: bar.y }} to={{ x: xMax + xScale.bandwidth(), y: bar.y }} stroke='rgba(0,0,0,0.3)' />}
+                    {/* White background spacing between stackes */}
+                    {!isLastIndex && <rect x={bar.x} y={bar.y} width={bar.width} height={1} fill={'#fff'}></rect>}
+                    {/* Right side Axis line */}
+                    <rect x={bar.x + bar.width} y={0} width={1} height={yMax} fill={'#000'}></rect>
+                  </Group>
+                </Group>
+              )
+            })
+          )
+        }
+      </BarStack>
+    </Group>
+  )
+}
+
+export default CategoricalYAxis

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

@@ -51,7 +51,7 @@ export const BarChartHorizontal = () => {
             return updateBars(barGroups).map((barGroup, index) => (
               <Group className={`bar-group-${barGroup.index}-${barGroup.x0}--${index} ${config.orientation}`} key={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`} id={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`} top={barGroup.y}>
                 {barGroup.bars.map((bar, index) => {
-                  const scaleVal = config.useLogScale ? 0.1 : 0
+                  const scaleVal = config.yAxis.type === 'logarithmic' ? 0.1 : 0
                   let highlightedBarValues = config.highlightedBarValues.map(item => item.value).filter(item => item !== ('' || undefined))
                   highlightedBarValues = config.xAxis.type === 'date' ? HighLightedBarUtils.formatDates(highlightedBarValues) : highlightedBarValues
                   let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
@@ -75,7 +75,7 @@ export const BarChartHorizontal = () => {
                   const barDefaultLabel = !config.yAxis.displayNumbersOnBar ? '' : yAxisValue
 
                   // check if bar text/value string fits into  each bars.
-                  const textWidth = (getTextWidth as any)(barDefaultLabel, `normal ${fontSize[config.fontSize]}px sans-serif`)
+                  const textWidth = getTextWidth(barDefaultLabel, `normal ${fontSize[config.fontSize]}px sans-serif`)
                   const textFits = Number(textWidth) < defaultBarWidth - 5
 
                   // control text position
@@ -177,6 +177,7 @@ export const BarChartHorizontal = () => {
                           const hasAsterisk = String(pd.symbol).includes('Asterisk')
                           const verticalAnchor = hasAsterisk ? 'middle' : 'end'
                           const iconSize = pd.symbol === 'Asterisk' ? barHeight * 1.2 : pd.symbol === 'Double Asterisk' ? barHeight : barHeight / 1.5
+                          const fillColor = pd.displayGray ? '#8b8b8a' : '#000'
                           return (
                             <Text // prettier-ignore
                               key={index}
@@ -185,7 +186,7 @@ export const BarChartHorizontal = () => {
                               opacity={transparentBar ? 0.5 : 1}
                               x={barX}
                               y={config.barHeight / 2 + config.barHeight * bar.index}
-                              fill={'#000'}
+                              fill={fillColor}
                               dy={config.barHeight / 5}
                               dx={10}
                               textAnchor='start'

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

@@ -49,7 +49,7 @@ const BarChartStackedHorizontal = () => {
                 const xAxisValue = formatNumber(data[bar.index][bar.key], 'left')
                 const yAxisValue = config.runtime.yAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.originalXAxis.dataKey])) : data[bar.index][config.runtime.originalXAxis.dataKey]
                 const yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
-                const textWidth = (getTextWidth as any)(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
+                const textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
                 const additionalColTooltip = getAdditionalColumn(hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
                 const tooltip = `<ul>

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

@@ -30,8 +30,8 @@ const BarChartStackedVertical = () => {
               barStack.bars.map(bar => {
                 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 barThickness = isDateAxisType ? (seriesScale.range()[1] - seriesScale.range()[0]) : (xMax / barStack.bars.length)
-                if(config.runtime.xAxis.type !==  'date') barThickness = config.barThickness * barThickness
+                let barThickness = isDateAxisType ? seriesScale.range()[1] - seriesScale.range()[0] : xMax / barStack.bars.length
+                if (config.runtime.xAxis.type !== 'date') barThickness = config.barThickness * barThickness
                 // tooltips
                 const rawXValue = bar.bar.data[config.runtime.xAxis.dataKey]
                 const xAxisValue = isDateAxisType ? formatDate(parseDate(rawXValue)) : rawXValue
@@ -52,9 +52,6 @@ const BarChartStackedVertical = () => {
                 return (
                   <Group key={`${barStack.index}--${bar.index}--${orientation}`}>
                     <Group key={`bar-stack-${barStack.index}-${bar.index}`} id={`barStack${barStack.index}-${bar.index}`} className='stack vertical'>
-                      <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barX + barWidth / 2} y={bar.y - 5} fill={'#000'} textAnchor='middle'>
-                        {yAxisValue}
-                      </Text>
                       {createBarElement({
                         config: config,
                         seriesHighlight,