Nivo: Specific color for specific bar

[shubham2809]

Hi,

Was just wondering if there is a way to set a color to a bar in a ResponsiveBar chart
For example:
my keys for bar chart is keys={['2017', '2018', '2019']}

So when I render data just of the key 2017 or 2018 or 2019, I want those bar color to be associated with a single color, as 2019 bar will always show green in color.

[plouc]

you can use a custom function for the colors property, for example:

const colors = { '2017': 'red', '2018': 'red', '2019': 'green' }
const getColor = bar => colors[bar.id]

const MyBar = () => <Bar colors={getColor} {...otherProps} />

[leandrotk]

Dependency version: "@nivo/bar": "0.59.2"

I tried this code, but I always get my bars with black color.

import { theme } from 'path/to/theme/style';

const isCurrentMonth = ({ index }) => index === 7;

const getColor = bar =>
  isCurrentMonth(bar)
    ? [theme.palette.primary.light, theme.palette.secondary.light]
    : [theme.palette.primary.main, theme.palette.secondary.main];

const MyBar = () => <Bar colors={getColor} {...otherProps} />

Am I missing something here, @plouc?

[wyze]

@leandrotk Your code looks to be returning an array, when it should be returning a single value (the color).

[leandrotk]

@wyze, I missed some information here. The bars have two different types of data, this is why the function returns an array. The keys prop looks like this:

const MyBar = () => <Bar {...otherProps} colors={getColor} keys={['earnings', 'bonus']} />

This way the bars got both black.

But when I just add the array of colors manually, I got it all right (one part of the bar is blue and the other is green). This code runs ok:

const MyBar = () =>
  <Bar
    {...otherProps}
    colors={[theme.palette.primary.main, theme.palette.secondary.main]}
    keys={['earnings', 'bonus']}
  />

The idea of getColor is to paint the last bar with a different color than the other bars (a lighter blue and green).

[wyze]

Here is a working example: https://codesandbox.io/s/upbeat-williams-zq7wg

The function will be executed per bar item, so it should only ever return a single value.

For debugging, you could do something like <Bar colors={(bar) => console.log(bar) || getColor(bar)} /> so you can see the data structure coming into the function.

[leandrotk]

Got it, @wyze. That makes sense to me now. Thanks!

[fillippeyton]

In case anyone wants to use a color property in the data itself (like the docs), here's what I'm doing:

const data = [
  {
    id: 'views',
    color: '#00f,
    data: [
      {...},
    ],
  },
  {
    id: 'engagements',
    color: "#f00",
    data: [
      {...},
    ],
  },
];

// render
<ResponsiveLine data={data} colors={d => d.color} />

[yehee]

In case anyone wants to use a color property in the data itself (like the docs), here's what I'm doing:

const data = [
  {
    id: 'views',
    color: '#00f,
    data: [
      {...},
    ],
  },
  {
    id: 'engagements',
    color: "#f00",
    data: [
      {...},
    ],
  },
];

// render
<ResponsiveLine data={data} colors={d => d.color} />

Spent hours to get it working, thank you!

[JP-sDEV]

In case anyone wants to use a color property in the data itself (like the docs), here's what I'm doing:

const data = [
  {
    id: 'views',
    color: '#00f,
    data: [
      {...},
    ],
  },
  {
    id: 'engagements',
    color: "#f00",
    data: [
      {...},
    ],
  },
];

// render
<ResponsiveLine data={data} colors={d => d.color} />

does this also work for the Bar component?

[wyze]

@JP-sDEV Yes it does, that is what the initial issue was for. You can see my https://github.com/plouc/nivo/issues/581#issuecomment-630302205 for an example.

[amalviya13]

Does this work as well with the ResponsivePie component? I've tried putting the color value in my data as both hsl and hex, but neither seems to give the proper output. Below are the two ways I have tried. Is there something I have to add?

data = [
    {
        "color": "#0000fe",
        "id": "blue",
        "label": "blue",
        "value": 1
    },
    {
        "color": "#fe00fe",
        "id": "fuchsia",
        "label": "fuchsia",
        "value": 2
    }
]

data = [
    {
        "color": "hsl(240, 100%, 50%)",
        "id": "blue",
        "label": "blue",
        "value": 1
    },
    {
        "color": "hsl(300, 100%, 50%)",
        "id": "fuchsia",
        "label": "fuchsia",
        "value": 2
    }
]

[wyze]

@amalviya13 This should work on the latest version (v0.64): https://nivo.rocks/storybook/?path=/story/pie--using-colors-from-data

[amalviya13]

Does Nivo have anything that can be used like a traditional histogram? I'm aware of the Bar graphs, but I was hoping for a traditional histogram