is it possible to display solid c3 grid lines via CSS instead of default dashed grid line?

is there a way to achieve solid c3 grid lines via css without explicitly declaring line values?

Example:

var chart = c3.generate({
    data: {
        columns: [
            ['sample', 30, 200, 100, 400, 150, 250, 120, 200]
        ]
    },
    grid: {
        x: {
            show: true
        },
        y: {
            show: true
        }
    }
});

In general, I've discovered that I can change the default styling of the grid with the following CSS:

.c3 .c3-grid line {
  stroke: pink,       
  stroke-width: 4,  -> if width can be changed, why can't I use css to make grid line solid?
  opacity: 0.3,      
  fill: blue,       
}

image of how the CSS above looks with the attributes listed above

I know that solid grid lines can be achieved by explicitly declaring them like this

Example:

C3 Style for Grid example

When I say explicitly declaring them I'm referring to the fact that in order to display solid grid lines you have to actually give the lines you want to be displayed. Like the example below:

grid: {
    x: {
        lines: [{value: 2}, {value: 4}]
    },
    y: {
        lines: [{value: 500}, {value: 800}]
    }
}

So I ask, is it possible to use css to make c3's default dashed grid line a solid line?

It seems silly that you can't just use something like:

.c3 .c3-grid line {
      stroke: pink,       
      stroke-width: 4,
      opacity: 0.3,      
      fill: blue,
      dashed: false,   <-- insert whatever property would give  me solid grid lines
    }

I've seen one other person ask a similar question here

I feel quite silly, after spending lots of time prepping my notes to ask my first question on Stack Overflow. A colleague mentioned that I should try using the property, stroke-dasharray: 0;.

Thus,

.c3 .c3-grid line {
  stroke: pink;
  stroke-dasharray: 0;  <--- turns dashed lines solid
}

According to MDN, the stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape.

After locating the correct CSS property I was able to find all sorts of resources on the finer points of using stroke-dasharray.

In short, it's very possible to use CSS to style a c3 grid line - if you know what property to use.

Recommended topics

Hot tags