Javascript C3区域线图，不同部分有不同颜色

我正在使用图形库在Javascript应用程序中绘制一些图形

我试图完成的是用不同的颜色绘制我的区域线图的各个部分。具体来说，我想要实现的是，当我的图形下降时，特定区域部分（列）将以红色绘制，直到值再次上升，此时它应该恢复为默认的蓝色

我总结了一个简单的例子来展示我目前拥有的：

c3.generate({
    bindto: "#chart",
    data: {
        columns: [
            ['data', 30, 200, 100, 400, 150, 250, 40, 134, 60],
        ],
        types: {
            data: 'area'
        }
    }
});

---

在本例中，我希望索引1和索引2之间的区域部分（列）被涂成红色。

您可以使用css执行此操作：

.c3-event-rects{
    fill-opacity: 1!important;
}
.c3-event-rect{
    fill:#ccc;
}
.c3-event-rect.c3-event-rect-0{
    fill:#F0F4C3;
}
.c3-event-rect.c3-event-rect-1{
    fill:#8BC34A;
}
.c3-event-rect.c3-event-rect-2{
    fill:#00BCD4;
}