score:20
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: stackoverflow.com
Related Query
- Using CSS variables (color) with chart.js - "var(--primaryColor)" not working
- Legend color not working with randomly generated background colors in chartjs pie chart
- Background color does not work when trying to create my data before using scatter chart with chart.js
- Css style not working well when resizing chart height in angular application
- Chartjs not working with d3 from csv source
- Chart JS not working with date
- Background color of the chart area in chartjs not working
- Chartjs with Vue, Bar Chart Border Radius not working
- Chart JS not working with Phonegap
- chart js download to png with canvas.toDataURL() not working in IE and firefox
- Chart JS not working with Dynamic Data
- Trying to create a custom tooltip in a doughnut chart using chartsjs, but it is not working
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Chart.js returns a console error and does not display the chart when using variables as data input
- updating chartjs pie chart by using .keypress() not working
- Pie chart not working using angular and ng2-charts
- Why chart is not working with Bootstrap Modal?
- how to create bar chart with group and sam color for each group using chart.js?
- Display line chart with connected dots using chartJS
- Bootstrap grid not working with canvas
- Chart looks only grey, does not show the color - Chartjs,discordjs
- angular-chart.js bar chart with 100% opacity color
- Uncaught TypeError: Chart is not a constructor when using Chart.js
- Series Details Not Showing in Angular Chart with Charts.js
- Chartjs doughnut chart with gradient color
- Time Series Line chart js in react not working
- Using data from API with Chart JS
- Use transparent stroke color with chartjs pie chart
- Chart JS not showing On hover with small data
- Click event of stacked line chart not working
More Query from same tag
- ChartJS 2.6 - Bar chart fixed height scrollable-X
- ng2-charts - Angular 4 working example
- Chart.js what is the new syntax for extending?
- Chart.js stacked and grouped horizontalBar chart
- how do i make ungrouped datasets with charts.js
- Chartjs error : time scale: "time.format" is deprecated. Please use "time.parser" instead
- chart js label not showing
- Position tooltip based on mouse position
- Why must I create my VueJS application before using ChartJS?
- Display legend of grouped data (different colors) in chart
- Getting nice chart.js animation when adding data with unshift()?
- How would I include toBase64Image class using the fxcosta library for Chart.js
- How to label x-Axis in Chart.js by days?
- Chart.js legend text showing undefined
- Horizontal bar with two yaxes chart js
- Change labels colors for radar chart js
- Can not update bar chart values in Chart.js 2.0.0 alpha3
- Chart js disable popup
- Connecting points between missing data in chart.js
- Chart.js - Multiple Doughnut Charts on same Canvas
- How to detect click on chart js 3.7.1 axis label?
- How to access or get value of specific graph on chart plot by click event?
- html2canvas Capture a chart.js-Chart with the size of full screen on different window size
- Chart Piechart in only show percentage on hover but it shows data and label with percentage both i just want to show percentage only percentage
- Unable to plot JSON to chartJS
- ng2-charts tooltip and legend stopped working
- hide dataset by default using Chart.js and a custom script
- Chart.js - How to customize specific grid line depending on tick value
- Calling data from outside of Chartjs code
- Why does one chart overlays another (chart.js)?