diff --git a/src/components/charts/bar/Bar.js b/src/components/charts/bar/Bar.js index 0d0fd87c5..a23e3ef90 100644 --- a/src/components/charts/bar/Bar.js +++ b/src/components/charts/bar/Bar.js @@ -92,6 +92,8 @@ const Bar = ({ defs, fill, borderRadius, + borderWidth, + getBorderColor, // motion animate, @@ -154,6 +156,7 @@ const Bar = ({ {({ showTooltip, hideTooltip }) => { const commonProps = { borderRadius, + borderWidth, enableLabel, labelSkipWidth, labelSkipHeight, @@ -194,6 +197,7 @@ const Bar = ({ height: Math.max(style.height, 0), label: getLabel(bar.data), labelColor: getLabelTextColor(baseProps, theme), + borderColor: getBorderColor(baseProps), }) })} @@ -206,9 +210,10 @@ const Bar = ({ key: d.key, ...d, ...commonProps, - label: getLabel(d), + label: getLabel(d.data), shouldRenderLabel: shouldRenderLabel(d), labelColor: getLabelTextColor(d, theme), + borderColor: getBorderColor(d), }) ) } diff --git a/src/components/charts/bar/BarItem.js b/src/components/charts/bar/BarItem.js index 10788e007..14bd79f34 100644 --- a/src/components/charts/bar/BarItem.js +++ b/src/components/charts/bar/BarItem.js @@ -22,6 +22,8 @@ const BarItem = ({ height, borderRadius, color, + borderWidth, + borderColor, label, shouldRenderLabel, @@ -53,6 +55,8 @@ const BarItem = ({ rx={borderRadius} ry={borderRadius} fill={data.fill ? data.fill : color} + strokeWidth={borderWidth} + stroke={borderColor} onMouseEnter={handleTooltip} onMouseMove={handleTooltip} onMouseLeave={hideTooltip} @@ -89,6 +93,8 @@ BarItem.propTypes = { height: PropTypes.number.isRequired, color: PropTypes.string.isRequired, borderRadius: PropTypes.number.isRequired, + borderWidth: PropTypes.number.isRequired, + borderColor: PropTypes.string.isRequired, label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, shouldRenderLabel: PropTypes.bool.isRequired, diff --git a/src/components/charts/bar/enhance.js b/src/components/charts/bar/enhance.js index 158d0662f..519a3535f 100644 --- a/src/components/charts/bar/enhance.js +++ b/src/components/charts/bar/enhance.js @@ -37,5 +37,8 @@ export default Component => withPropsOnChange(['label', 'labelFormat'], ({ label, labelFormat }) => ({ getLabel: getLabelGenerator(label, labelFormat), })), + withPropsOnChange(['borderColor'], ({ borderColor }) => ({ + getBorderColor: getInheritedColorGenerator(borderColor), + })), pure )(Component) diff --git a/src/components/charts/bar/props.js b/src/components/charts/bar/props.js index 3149b46b0..14f93d1da 100644 --- a/src/components/charts/bar/props.js +++ b/src/components/charts/bar/props.js @@ -64,6 +64,9 @@ export const BarPropTypes = { .isRequired, }) ).isRequired, + borderWidth: PropTypes.number.isRequired, + borderColor: PropTypes.any.isRequired, + getBorderColor: PropTypes.func.isRequired, // interactivity isInteractive: PropTypes.bool, @@ -107,6 +110,8 @@ export const BarDefaultProps = { defs: [], fill: [], + borderWidth: 0, + borderColor: 'inherit', // interactivity isInteractive: true,