Is there a method to achieve consistent and solid grid lines in C3 using CSS without specifying exact line values?
For instance, consider C3's basic Grid Line example:
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 120, 200]
]
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
I have found that I can modify the default grid style with CSS:
.c3 .c3-grid line {
stroke: pink,
stroke-width: 4,
opacity: 0.3,
fill: blue
}
You can view how this CSS affects the grid in this image.
To achieve solid grid lines, one typically needs to explicitly declare them as shown in the Style for Grid example:
grid: {
x: {
lines: [{value: 2}, {value: 4}]
},
y: {
lines: [{value: 500}, {value: 800}]
}
}
Can we use CSS to transform C3's default dashed grid lines into solid lines?
It seems cumbersome that you cannot simply do something like:
.c3 .c3-grid line {
stroke: pink,
stroke-width: 4,
opacity: 0.3,
fill: blue,
dashed: false
}
This question has also been raised by someone else here.