how to access color in recharts from json?

Question

I'm using barchart in recharts

const data = [
  { name: 'Page A', uv: 4000, pv: 2400, color:'yellow', amt: 2400 },
];

const SimpleBarChart = (data) => ({
  return (
    <BarChart
      width={600}
      height={300} data={data}
      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
    >
      <CartesianGrid strokeDasharray="3 3"/>
      <XAxis dataKey="name"/>
      <YAxis/>
      <Legend />
      <Bar dataKey="pv" fill={data.color} />
    </BarChart>
  );
})

I want to use color from the json. What should be the syntax of fill in the code ?

Do you import data in the componet or pass it as props? – Gh05d Sep 23 '20 at 11:36 — Gh05d, Sep 23 '20 at 11:36
@Gh05d as props(updated the code) – ronnie Sep 23 '20 at 11:40 — ronnie, Sep 23 '20 at 11:40
Well, then it should work. Do you get an error? – Gh05d Sep 23 '20 at 11:56 — Gh05d, Sep 23 '20 at 11:56
@Gh05d i'm getting black color(for all the bars) – ronnie Sep 23 '20 at 11:58 — ronnie, Sep 23 '20 at 11:58

score 1 · Answer 1 · answered Sep 23 '20 at 12:30

1

In order to get the color value that is stored in the first element of your data array, you just need to write the following:

<Bar dataKey="pv" fill={data[0].color} />

Because data.color yields no values, since it does not exist.

answered Sep 23 '20 at 12:30

Orlyyn

2,296
2
20
32

how to access the index in larger data? – ronnie Sep 23 '20 at 13:24
What do you mean in larger data ? – Orlyyn Sep 23 '20 at 13:49
how to make it dynamic using indices ( data[i].color) – ronnie Sep 23 '20 at 19:40
A bar can have only a single color, what do you want to achieve ? What do you want to have in the end ? Multicolor bars? One bar per node with a color each? – Orlyyn Sep 24 '20 at 07:24

score 0 · Answer 2 · answered Sep 24 '20 at 05:09

You can this either by talking to the array directly by doing this;

let data = [
  { 
    name: 'Page A', 
    uv: 4000, 
    pv: 2400, 
    color:'yellow', 
    amt: 2400 
  }
];

console.log(data[0].name)

OR 
by looping through the array doing this;

for(let i=0; i<data.length; i++){
  console.log(data[i].name)
}

how to access color in recharts from json?

2 Answers2