Nivo: Bar Chart - map color from object

[elyfuentes27]

Hi,

Was just wondering if there is a way to set a color from object for each bar in a ResponsiveBar chart. I have the following Code, not sure what I'm doing wrong.

import React from 'react';
import { ResponsiveBar } from '@nivo/bar'

class BarChart extends React.Component {
    state = {
        data: [{
                "id": "Product",
                "label": "Product",
                "value": 0.6665,
                "color": "#008CCC"
            },
            {
                "id": "Technology",
                "label": "Technology",
                "value": 0.0396,
                "color": "#F15A22"
            },
            {
                "id": "All Services",
                "label": "All Services",
                "value": 0.2939,
                "color": "#05b1ff"
            }
        ]
    }

    componentWillReceiveProps(props) {
        console.log('props',props)
    }

    render() {
        const {data} = this.state
    return (
        <div style={{height:600}}>

        <ResponsiveBar
        data={data}
        // keys={data.map(i => i.id)}
        indexBy="id"
        margin={{ top: 50, right: 150, bottom: 80, left: 120 }}
        padding={0.3}
        groupMode="grouped"
        layout="horizontal"
        colors = {data.map(c => c.color)}
        colorBy = "id"
        defs={[
            {
                id: 'dots',
                type: 'patternDots',
                background: 'inherit',
                color: '#38bcb2',
                size: 4,
                padding: 1,
                stagger: true
            },
            {
                id: 'lines',
                type: 'patternLines',
                background: 'inherit',
                color: '#eed312',
                rotation: -45,
                lineWidth: 6,
                spacing: 10
            }
        ]}
        fill={[

        ]}
        borderColor={{ from: 'color', modifiers: [ [ 'brighter', '1.6' ] ] }}
        axisTop={null}
        axisRight={null}
        axisBottom={{
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            legend: '',
            legendPosition: 'middle',
            legendOffset: 23
        }}
        axisLeft={{
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            legend: '',
            legendPosition: 'middle',
            legendOffset: -40
        }}
        enableGridX={true}
        enableGridY={false}
        labelSkipWidth={12}
        labelSkipHeight={12}
        labelTextColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }}
        legends={[]}
        animate={true}
        motionStiffness={90}
        motionDamping={15}
    />
    </div>
    );
  }
}

export default BarChart;

Thank you

[wyze]

You should change the colorBy property to index. That will resolve your issue.

[elyfuentes27]

Indeed that fixed my issue Thanks @wyze