Accepted answer


To debug a problem like this, use console.log function inside the function setting the fill attribute:

style("fill", function(d) { 
    console.log('d is', d)
    return color(;

You'll see that there is no This attribute is not passed to point:

// circle points | кружочки на лініях

    .data(function(d){ return d.values; }) // point has access to d.values, not to


To fix the problem you may do the following:

Add the name property inside each item of values array

  .data(function(d) {

    // add name inside each value inside `d.values`
    d.values.forEach(function(value) { =

    return d.values;

Then your fill function will work correctly.

Fixed example to illustrate the solution.


As per initial answer, you had different data associated with circles, which was d.value not
Also you were missing a hash sign in your colour range declaration:
var color = d3.scale.ordinal().range(["c9bebe", "#787676", "#4d4dff"]);, which should obviously stand as:
var color = d3.scale.ordinal().range(["#c9bebe", "#787676", "#4d4dff"]);.

One more thing I could add to all this discussion is that you can, for simplicity and clarity, associate your colours with groups containing circles directly. So instead of adding styles to circle elements, you can add it to the group:

var point = column.append("g")
    "class": "line-point",
    "fill": function(d) { return color(; }

And console.log at different points of your code is a great way of finding issue, in a methodic way.

JSFiddle adjusted

Related Query

More Query from same tag