Chartist.js grid color

Question

I would like to change grid color on Chartist.js from default grey. I tried to override ct-grid-color setting, but probably did something incorrectly. Can anyone please suggest how to do it?

Answer 1

Just insert in your CSS.

.ct-grid{ stroke: red;}

Answer 2

grid lines:

.ct-grids line {
  color: steelblue;
}

.. and don't forget the labels! ..

grid labels:

.ct-labels span {
  color: steelblue;
}

---

The reason why targeting only ".ct-grid" won't work is due to css specificity. Basically the more specific the css, the more important it becomes so ..

.ct-grids line { } > .ct-grids { }

If it's a little confusing, a nifty little tool is Keegan Street's css specificity calculator.