0

I may be missing something simple but I cannot change the background color of the chart using chartist.js

.ct-grid {
background: black;
background-color: black;
stroke:black;
fill:black;
}

I am trying to change just the grid area, not the entire area hence I am not using ct-chart ct-golden-section

Any ideas?

JDT
  • 965
  • 2
  • 8
  • 20
  • I think this question has been answered already, try [this](https://stackoverflow.com/questions/38493564/chart-area-background-color-chartjs) – Agrendallan Apr 16 '19 at 14:45
  • @Agrendallan that is for chart.js not chartist.js – JDT Apr 16 '19 at 15:22
  • Doesn't it work in the same fashion? If not this seems to be a solution for chartist [This maybe?](https://stackoverflow.com/questions/43432120/how-to-change-line-colors-of-chart-in-chartist-js#47580846) – Agrendallan Apr 16 '19 at 16:56
  • Your solution is for the lines, I am looking to change the color of the graph itself (like your first suggestion - but for chartist.js) – JDT Apr 16 '19 at 17:59
  • I think you could use fill for changing the whole background, basically filling the rectangle that is your background. Which is achieved by using the "fill" css property. – Agrendallan Apr 17 '19 at 05:59

2 Answers2

0

The below might give you an idea of how to proceed .. maybe use some css like the calc() to find the right sizes so that you don't set them statically

.ct-golden-section:before {
    display: block;
    float: left;
    content: "";
    width: 100%; 
    height: 413px; //set as the size of the container
    padding-bottom: 449px; //set as the size of the container
    background: yellow; // set the bg color wanted for the container
    border-style: solid;
    border-top-width: 15px;
    border-left-width: 49px;
    border-color: orange;  // choose the color of the page u have
    border-bottom-width: 25px;
    border-right-width: 39px;
}

Check the screenshot to see the result of the above:

https://drive.google.com/file/d/15-vuRMXn2NspkNWfIuvcEZ8xxOEUeEgd/view?usp=sharing

Please anyone feel free to edit my temporary solution

Rayan
  • 81
  • 2
  • 9
  • Hmm, is there a reason for the `:before`, also why would we not be able to use `ct-grids` to then change background/fill/background-color. It seems like there should be a much simpler solution – JDT Apr 17 '19 at 17:02
0

From version 0.11.4 you can use option showGridBackground: true and then set from css.For example

.ct-grid-background {
        fill: aliceblue;
 }

You can read more information there

Renat Seyfetdinov
  • 413
  • 4
  • 7