diff --git a/packages/bar/src/BarCanvas.tsx b/packages/bar/src/BarCanvas.tsx index aac01d7ecb..76eb192bd7 100644 --- a/packages/bar/src/BarCanvas.tsx +++ b/packages/bar/src/BarCanvas.tsx @@ -82,11 +82,11 @@ const InnerBarCanvas = ({ // barComponent = canvasDefaultProps.barComponent, - // enableLabel = canvasDefaultProps.enableLabel, - // label = canvasDefaultProps.label, - // labelSkipWidth = canvasDefaultProps.labelSkipWidth, - // labelSkipHeight = canvasDefaultProps.labelSkipHeight, - // labelTextColor = canvasDefaultProps.labelTextColor, + enableLabel = canvasDefaultProps.enableLabel, + label = canvasDefaultProps.label, + labelSkipWidth = canvasDefaultProps.labelSkipWidth, + labelSkipHeight = canvasDefaultProps.labelSkipHeight, + labelTextColor = canvasDefaultProps.labelTextColor, // markers, @@ -137,8 +137,8 @@ const InnerBarCanvas = ({ const getBorderColor = useInheritedColor>(borderColor, theme) const getColor = useOrdinalColorScale(colors, colorBy) const getIndex = usePropertyAccessor(indexBy) - // const getLabel = usePropertyAccessor(label) - // const getLabelColor = useInheritedColor>(labelTextColor, theme) + const getLabel = usePropertyAccessor(label) + const getLabelColor = useInheritedColor>(labelTextColor, theme) const getTooltipLabel = usePropertyAccessor(tooltipLabel) const options = { @@ -173,6 +173,16 @@ const InnerBarCanvas = ({ [hiddenIds, keys, result.bars] ) + const shouldRenderLabel = useCallback( + ({ width, height }: { height: number; width: number }) => { + if (!enableLabel) return false + if (labelSkipWidth > 0 && width < labelSkipWidth) return false + if (labelSkipHeight > 0 && height < labelSkipHeight) return false + return true + }, + [enableLabel, labelSkipHeight, labelSkipWidth] + ) + useEffect(() => { const ctx = canvasEl.current?.getContext('2d') @@ -266,6 +276,13 @@ const InnerBarCanvas = ({ if (borderWidth > 0) { ctx.stroke() } + + if (shouldRenderLabel({ height, width })) { + ctx.textBaseline = 'middle' + ctx.textAlign = 'center' + ctx.fillStyle = getLabelColor(bar) + ctx.fillText(getLabel(bar.data), x + width / 2, y + height / 2) + } }) ctx.save() @@ -278,6 +295,8 @@ const InnerBarCanvas = ({ enableGridX, enableGridY, getBorderColor, + getLabel, + getLabelColor, gridXValues, gridYValues, groupMode, @@ -297,6 +316,7 @@ const InnerBarCanvas = ({ result.xScale, result.yScale, reverse, + shouldRenderLabel, theme, width, ]) diff --git a/packages/bar/src/props.ts b/packages/bar/src/props.ts index 8a9b44d3ec..8be106fc59 100644 --- a/packages/bar/src/props.ts +++ b/packages/bar/src/props.ts @@ -34,7 +34,7 @@ export const defaultProps = { labelSkipWidth: 0, labelSkipHeight: 0, labelLinkColor: 'theme', - labelTextColor: 'theme', + labelTextColor: { from: 'theme', theme: 'labels.text.fill' }, colorBy: 'id' as const, colors: { scheme: 'nivo' } as OrdinalColorScaleConfig, diff --git a/packages/bar/stories/barCanvas.stories.tsx b/packages/bar/stories/barCanvas.stories.tsx index 75d1c3d438..30a6e11a06 100644 --- a/packages/bar/stories/barCanvas.stories.tsx +++ b/packages/bar/stories/barCanvas.stories.tsx @@ -13,7 +13,6 @@ const commonProps = { indexBy: 'country', keys, padding: 0.2, - labelTextColor: 'inherit:darker(1.4)', labelSkipWidth: 16, labelSkipHeight: 16, }