data.color function based on d.value does not change chart color

[karenmnyv]

I am working on an area chart where I want the data to have a different color if the value is negative.

I don't have a codepen, but I was testing on the c3 example pages, so it's possible to just paste the code there

When using only d.id, the color of the chart changes

var chart = c3.generate({ data: { columns: [ ['data1', -30, 20, -50, 40, 60, -50], ], types: {data1: 'area'}, color: function (color, d) { if (d.id == "data1") { return '#ff0000' } return color; } } });

But when using value as well, only the data points change color, not the lines or the area

var chart = c3.generate({ data: { columns: [ ['data1', -30, 20, -50, 40, 60, -50], ], types: {data1: 'area'}, color: function (color, d) { if (d.value < 0 && d.id == "data1") { return '#ff0000' } return color; } } });

Edit: this is my first time opening an issue, so please let me know if I need to add any info