nvd3.js - unable to change color of symbol in scatter plot

Question

I am trying to change the colors of different groups of the nvd3 scatter chart here but am unable to understand how to do so. I would like to change the colors of the 4 series in the example to orange, green, yellow, red.

    nv.addGraph(function() {
    chart = nv.models.scatterChart()
    .showDistX(true)
    .showDistY(true)
    .color( d3.scale.category10().range() ); //  tried to change to green, orange here but it did not work 
    };

I tried

        .color( d3.rgb("green"), d3.rgb("orange") ); 

but then the plot did not even appear. I am new to javascript. So please excuse my mistake if it is too simple.

Edit

I also would like to know how to choose the color based on RGB values.

Thanks

Comorin

Answer 1

The color function takes an array of colours. For the scatter plot this equates to one colour per data group.

if you change it to

nv.addGraph(function() {
chart = nv.models.scatterChart()
.showDistX(true)
.showDistY(true)
.color(  [d3.rgb("green"), d3.rgb("orange")] ); 
};

it seems to work as you need.

EDIT - setting colour using RGB string

this can be done using css syntax

 nv.addGraph(function() {
chart = nv.models.scatterChart()
.showDistX(true)
.showDistY(true)
.color(  ["rgb(0,255,0)","rgb(255,165,0)"] ); 
};

You would do well to read the API documentation at https://github.com/novus/nvd3/wiki/API-Documentation

Cadmus

Can we specify the RGB values instead of green or orange? – Comorin

you can use css syntax – Cadmus

Could you answer this question - I am facing a similar problem - #22994492 – Comorin