How to pass color props by Nivo ResponsiveBar?

Question

I use Nivo's responsive bar. I want to show a bar like the image. And I can do it if I set the colors directly like below . But I can set it by passing the props or set by a function. How can I do it?

<ResponsiveBar
  colors='#0481F8'
/>

• By a function

const getColor = () => title===A ? '#0481F8' : title===B ? '#F98700'

<ResponsiveBar
  title={title}
  data={data}
  colors={getColor()}
/>

• By passing props

Parent

<Chart color='#0481F8' data=...>

Child

const Chart = ({data, color}) => {

return (
<>
<ResponsiveBar
  data={data}
  colors={color}
/>
</>
)}

Answer 1

Yes you can set it through props, ResponsiveBar can take multiple colors also. You should use it as,

<Chart color={['#0481F8']} data={..}>

const Chart = ({data, color}) => {

return (
<ResponsiveBar
  data={data}
  colors={color}
/>
)}