1

I am creating a basic dashboard of charts, using chart.js to render the data. I have a javasciprt per chart that gets the data and draws each chart to the dashboard (so that I can create multiple dashboards, and re use certain charts wherever.) I want to be able to store a list of colours in css, so that charts can use the same colours to represent the same item, even when in a different style of chart.

Ive looked into using :root in css and using the get property value to retrieve the variable, but this doesn't seem to work. Am I going about this the right way?

CSS:

:root {
 --mediumRiskColour: blue;
}

Javascript to get the variable:

var mediumRiskColour =     getComputedStyle(document.documentElement).getPropertyValue('--mediumRiskColour');

// Javascript to then use this variable in the chart:

{
label: 'Medium risk
data: mediumRisk,
borderColor: 'mediumRiskColour',
backgroundColor: 'mediumRiskColour',
},

I would like the colour to be pulled from the css so that I can use it to colour items in a chart that is rendered in javascript

EPicLURcher
  • 21
  • 1
  • 8
  • It should work this way, according to https://stackoverflow.com/a/49419028/10955263 Question would be, did you get the timing right, is this CSS already applied at the time you try to read this value? – 04FS Apr 03 '19 at 10:05
  • I use the to call a function that then calls the functions required to draw the charts - I presume that the css has loaded once the body has loaded? – EPicLURcher Apr 03 '19 at 10:13

0 Answers0