How to Set Individual Point Colors in Nivo Scatterplot for React

Question

I've created a graph using the '@nivo/scatterplot' for React. I can successfully set the color for all points using something like colors='#FF0000' in the graph definition, but I can't figure out how to set the color of an individual point (say, based on its value). I don't want to apply a nivo scheme because that applies per group and I want to apply per point and have control over what each point's color is. Is there a way to do this?

Answer 1

Yes, you can conditionally change the color of a Nivo scatterplot point by passing a function to the colors prop:

import { Node } from '@nivo/scatterplot'

colors={(node: Node) => {
        return node.y > 5 ? 'red' : 'black'
}}