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

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](https://c3js.org/samples/data_color.html), 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