Nivo: Missing 'colorBy' type in BarSvgProps

[eggei]

I created a ResponsiveBarChart and I added colors and colorBy props to adjust the colors of the bars. How every TypeScript compiler complains about colorBy prop being missed in the prop types. More specifically, colorBy prop is not in BarProps

I would love to open a PR for this but couldn't find a contribution guide so created this issue instead.

Funny that there are two workarounds in the screenshot for different Typescript issues.

[wyze]

This is deprecated, you should be using the colors prop. See https://github.com/plouc/nivo/pull/904#issuecomment-626407337

[eggei]

@wyze But if I take out colorBy from the below code scheme doesn't work. If I put it in and specify as colorBy="index" it works.

<ResponsiveBar
        margin={{ top: 32, right: 48, bottom: 56, left: 48 }}
        colors={{ scheme: 'orange_red' }}
        colorBy="index"
        layout="horizontal"
        keys={keys}
        padding={0.2}
        indexBy={indexBy}
        data={data.sort((a, b) => a.count - b.count)}
        animate={false}
        enableGridY={false}
        enableGridX
        labelFormat={labelValue =>
          ((
            <tspan x={-16}>{replaceThousandWithK(labelValue)}</tspan>
          ) as unknown) as string
        }
        borderRadius={2}
        tooltip={customTooltip}
        axisLeft={{
          renderTick,
        }}
        layers={['grid', 'bars', 'axes'] as BarLayerType[]} // This pushes axes in front of bars so tick labels stay over bars
      />

[wyze]

To achieve the same results you would do this:

+import { getOrdinalColorScale } from '@nivo/colors'


```diff
<ResponsiveBar
        margin={{ top: 32, right: 48, bottom: 56, left: 48 }}
-       colors={{ scheme: 'orange_red' }}
-       colorBy="index"
+       colors={getOrdinalColorScale({ scheme: 'orange_red' }, 'index')}
        layout="horizontal"

[eggei]

@wyze Thank you for helping, this works! Is there a part in the docs that explains how to use getOrdinalColorScale function? - or others if there are..

[wyze]

No I don't think so. I would imagine it would be here: https://nivo.rocks/guides/colors

[eggei]

Me too, but couldn't find it. Thanks so much for helping, again!

Hey @plouc - I just wanted to let you know about this thread. It might be very useful to have this info in https://nivo.rocks/guides/colors.