question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using CSS for Chart.js colors

See original GitHub issue

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/

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:1
  • Comments:12 (6 by maintainers)

github_iconTop GitHub Comments

3reactions
kurklecommented, Feb 25, 2020

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

2reactions
kurklecommented, Feb 25, 2020
Read more comments on GitHub >

github_iconTop Results From Across the Web

Using CSS variables (color) with chart.js - "var - Stack Overflow
I've got a web-app project that uses two stylesheets to define two color sets (day & night ...
Read more >
Colors | Chart.js
Colors. Charts support three color options: for geometric elements, you can change background and border colors;; for textual elements, ...
Read more >
Support css variables for colors #9983 - chartjs/Chart.js - GitHub
I'm trying to keep my charts always styled with the correct color. This depends on dark/light style and is a hassle to have...
Read more >
CSS variable colors on Chart.js - CodePen
Use colors from CSS variables to theme Chart.js line charts...
Read more >
How to Color the Indicator With CSS in Chart JS | Part 2
How to Color the Indicator With CSS in Chart JS | Part 2In this video we will explore how to color the indicator...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found