Chart.js: Using CSS for Chart.js colors

[carderm]

This is not an issue as such, but it might be useful to someone else out there...

I've developed a simple library that uses Sass to create default CSS color formats for Chart.js and a javascript/jQuery function that will assign those colors to the data object.

This removes colors from being baked into the javascript and puts them back in the CSS for designers to manage.

Please feel free to use it: https://github.com/mcldev/ChartJS-Sass/

[etimberg]

That's really awesome @carderm
Thanks for sharing!

[etimberg]

@carderm would it be possible for your plugin to be updated for v2? In v2.1 we will launch a new plug-in API and I think this would be a good candidate to fit into that new system

[carderm]

Sounds good - I'm happy to have a look at this. Haven't had much time lately though.
Is there a v2.1 tag somewhere?

[fulldecent]

Hello, today I am closing all issues that are only affecting version 1 of Chart.js as WONTFIX.

If this issue does affect version 2 as well, I apologize for the error. Please create a test case against Chart.js 2 using on of the below websites and we will be happy to reopen the issue and update its classification:

• http://jsbin.com/
• http://jsfiddle.net/
• http://codepen.io/pen/
• Premade template: http://codepen.io/pen?template=JXVYzq

[CookiesGirl]

Hi !
I want to know if yout solution is ok?
I need to styling my charts (chartjs) on css, because I work with people who don't dev, but write css is "ok".

[kurkle]

@CookiesGirl you could use css-vars: https://codepen.io/kurkle/pen/JjoXXXv

[CookiesGirl]

@CookiesGirl you could use css-vars: https://codepen.io/kurkle/pen/JjoXXXv

I look this! Thank you

[CookiesGirl]

@kurkle > it separates the script from the page structure, but the codce remains accessible. I would just have to be able to mark (for the site admin) "the color of the curve changes there.", They should not see all the code, if not a bad manipulation and it is a disaster.

[kurkle]

Updated pen with a color sample: https://codepen.io/kurkle/pen/KKpaYwx?editors=1111

[CookiesGirl]

Sorry @kurkle I'm a beginner in dev :/
I my case, I have
1 graph.php how contain 2 canvas ID (graph01 / graph02
1 charts.php how contain the 2 graphs : one type line, and one Mixed types (line and bar)
1 css
I just want to take on CSS this party :

 backgroundColor: [
                'rgba(0, 0, 0, 0.0)'
            ],
            borderColor: [
                'teal',
            ],
            borderWidth: 2`

for exemple :

.chart-container{
background-color: red;
}
.chart-line {
border : 2px solid red;
}

It's possible or not?

[kurkle]

Ok, simplified the pen quite a lot: https://codepen.io/kurkle/pen/KKpaYwx
So it can be done (not exactly as you wrote though).
Browser support: https://caniuse.com/#feat=css-variables

[CookiesGirl]

Ok, simplified the pen quite a lot: https://codepen.io/kurkle/pen/KKpaYwx
So it can be done (not exactly as you wrote though).
Browser support: https://caniuse.com/#feat=css-variables

It works, it works !!!
You saved me, thank you !!!♥ 💯