Scatter plot remains grey

Question

I am using React Victory to plot different datasets and functions in a project. However I am unable to color scatter plot points.

I have tried with the following piece of code:

    import React, { Component } from "react";
    import { VictoryChart, VictoryScatter, VictoryTheme } from 'victory';

    import './input_component.css'

    class InputComponent extends Component {
        constructor(props) {
            super(props);
            this.state = {  }
        }

    render() { 
        return ( 
        <div className = "input_layer">
            <VictoryChart
            theme={VictoryTheme.material}
            domain={{ x: [-1, 1], y: [-1, 1] }}>
                <VictoryScatter
                size={5}
                data={[{x:-0.7, y:1, fill: "blue"}, {x:0.5, y:-0.2, fill: "red"}]}
                />
            </VictoryChart>
        </div> 

        );
    }
  }

  export default InputComponent;

From this I get a scatter plot chart, however all data points are grey instead of the color I specify as the "fill" argument.

Looking at the documentation for the data prop here, it would seem like I should be able to specify a color through the "fill" argument.

If anyone has suggestions to what I am doing wrong, I would be glad to hear them.

Answer 1

I know it's late but it will help someone. Using style prop in victoryScatter will solve your problem.

<VictoryScatter
    size={5}
    data={[{x:-0.7, y:1, fill: "blue"}, {x:0.5, y:-0.2, fill: "red"}]}
    style={{
    data: {
      fill: ({ datum }) => datum.fill,
    }
  }}
/>

You can add any style property you want in the style props.