30👍
CSS variables are used in stylesheet, if you would access them in JS you can do like below snippet:
var style = getComputedStyle(document.body);
var primCol = style.getPropertyValue('--primaryColor');
$("#mydiv").text("primaryColor: " + primCol);
:root {
--primaryColor: #336699;
}
#mydiv {
background-color: var(--primaryColor);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">
</div>
So in a chart.js:
var style = getComputedStyle(document.body);
var primCol = style.getPropertyValue('--primaryColor');
var chartCol = style.getPropertyValue('--chartColor');
var chartData = {
labels: ['a', 'b', 'c', 'd'],
datasets: [{
label: 'value',
backgroundColor: 'rgba(219, 20, 0, 0.2)',
borderColor: chartCol,
data: [30, 50, 25, 10]
}]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
type: 'line',
data: chartData,
options: {
legend: { display: false },
scales: {
yAxes: [{
ticks: {
fontColor: primCol,
}
}],
xAxes: [{
ticks: {
beginAtZero: true
}
}],
}
}
});
:root {
--primaryColor: #00ff00;
--chartColor: #ff0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myChart" height="300" width="500"></canvas>
Source:stackexchange.com