CODEWITHSUNDEEP
csschartist.js
JDT
JDT

Reputation: 1085

How to color the chart background in chartist.js

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?

Upvotes: 0

Views: 1638

Answers (2)

Renat Seyfetdinov
Renat Seyfetdinov

Reputation: 433

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

Upvotes: 0

Rayan
Rayan

Reputation: 91

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

Upvotes: 0

Related Questions