diff --git a/package.json b/package.json
index 0c4aa07a9..a460681b5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "nivo",
- "version": "0.6.0",
+ "version": "0.7.0",
"licenses": [
{
"type": "MIT",
diff --git a/src/components/charts/bar/Bar.js b/src/components/charts/bar/Bar.js
index 6eba008c8..0fd137359 100644
--- a/src/components/charts/bar/Bar.js
+++ b/src/components/charts/bar/Bar.js
@@ -12,7 +12,7 @@ import { merge } from 'lodash'
import { TransitionMotion, spring } from 'react-motion'
import Nivo, { defaultTheme } from '../../../Nivo'
import { marginPropType, motionPropTypes } from '../../../props'
-import { getColorsGenerator } from '../../../lib/colorUtils'
+import { getColorsGenerator, getInheritedColorGenerator } from '../../../lib/colorUtils'
import { generateGroupedBars, generateStackedBars } from '../../../lib/charts/bar'
import SvgWrapper from '../SvgWrapper'
import Axes from '../../axes/Axes'
@@ -49,6 +49,7 @@ export default class Bar extends Component {
// labels
enableLabels: PropTypes.bool.isRequired,
+ labelsTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
// interactions
onClick: PropTypes.func,
@@ -66,7 +67,6 @@ export default class Bar extends Component {
margin: Nivo.defaults.margin,
groupMode: 'stacked',
xPadding: 0.1,
- enableLabels: true,
axes: {
left: {
enabled: true,
@@ -78,6 +78,11 @@ export default class Bar extends Component {
enableGridX: false,
enableGridY: true,
+ // labels
+ enableLabels: true,
+ labelsLinkColor: 'theme',
+ labelsTextColor: 'theme',
+
// theming
theme: {},
colors: Nivo.defaults.colorRange,
@@ -100,7 +105,11 @@ export default class Bar extends Component {
axes,
enableGridX,
enableGridY,
+
+ // labels
enableLabels,
+ labelsLinkColor: _labelsLinkColor,
+ labelsTextColor: _labelsTextColor,
// theming
theme: _theme,
@@ -119,6 +128,8 @@ export default class Bar extends Component {
const theme = merge({}, defaultTheme, _theme)
const color = getColorsGenerator(colors, colorBy)
+ const labelsLinkColor = getInheritedColorGenerator(_labelsLinkColor, 'axis.tickColor')
+ const labelsTextColor = getInheritedColorGenerator(_labelsTextColor, 'axis.textColor')
const motionProps = {
animate,
@@ -200,7 +211,15 @@ export default class Bar extends Component {
{...motionProps}
/>
{bars}
- {enableLabels && result.bars.map(d => )}
+ {enableLabels &&
+ result.bars.map(d =>
+
+ )}
)
}
diff --git a/src/components/charts/bar/BarItemLabel.js b/src/components/charts/bar/BarItemLabel.js
index 44e1f04a3..74610cc85 100644
--- a/src/components/charts/bar/BarItemLabel.js
+++ b/src/components/charts/bar/BarItemLabel.js
@@ -18,13 +18,14 @@ export default class BarItemLabel extends Component {
y: PropTypes.number.isRequired,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
- color: PropTypes.string.isRequired,
+ linkColor: PropTypes.string.isRequired,
+ textColor: PropTypes.string.isRequired,
}
static defaultProps = {}
render() {
- const { x: _x, y: _y, width, height, color, value } = this.props
+ const { x: _x, y: _y, width, height, linkColor, textColor, value } = this.props
let x = _x
let y = _y
@@ -35,7 +36,7 @@ export default class BarItemLabel extends Component {
textX = -13
textAnchor = 'end'
y = _y + height / 2
- line =
+ line =
} else {
textX = 0
textAnchor = 'middle'
@@ -46,7 +47,7 @@ export default class BarItemLabel extends Component {
return (
{line}
-
+
{value}
diff --git a/src/lib/colorUtils.js b/src/lib/colorUtils.js
index 49efe853f..b32ee63cf 100644
--- a/src/lib/colorUtils.js
+++ b/src/lib/colorUtils.js
@@ -144,7 +144,7 @@ export const getColorsGenerator = (colors, colorBy) => {
const memoizedColorModifier = _.memoize((method, _amount) => {
const amount = parseFloat(_amount)
- return _.memoize(d => rgb(d.color)[method](amount), d => d.color)
+ return _.memoize(d => rgb(d.color)[method](amount).toString(), d => d.color)
}, (method, amount) => `${method}.${amount}`)
const noneGenerator = () => 'none'