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
- accessing returned data from a states resolve function
- How to plot a line chart which has both the start and points outside the canvas area using Chart.js
- Chartjs defaults deprecation warning
- How to change states for making dynamic pie chart?
- How to make ng2-Chart Scrollable for large amount of data sets?
- Chart.js 3+, Firefox 68 and Angular: "ReferenceError: "ResizeObserver is not defined"
- Chart.js - Creating multiple charts on one page
- How to add area with break on line chart with fill color
- Hide or show two datasets with one click event of legend in chart.js
- how can i show labels and value in both on bar chart
- Bootstrap > Extend ChartJS canvas horizontally to match overflowing columns
- How to display only one label in a multi line char?
- Chartjs won't render chart with Requirejs
- Get X, Y onClick chart coordinates in ChartJS
- How to add an input box next to Chart.js y axis label?
- Object list into chart labels not working
- Multiple Axis Line Chart
- ChartJS - adding scroll to horizontal legend in Line chart
- react-chartjs: difference between `scales.x`/`xAxes`/`xAxes[]`
- How can I remove the grid line in the background of the line chart?
- How to change the time format displayed in the chart?
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- ngx-charts-advanced-pie-chart is reading my rest api response as null
- chart js Labels and Grouping labels
- Chart.js - Setting max Y axis value and keeping steps correct
- ChartJS options with Chartkick
- How to use generated HTML legends to enable or disable datasets in Chart.js
- Chart.js error Cannot read property 'length' of null
- Chartjs doughnut chart for conditional data
- chart.js mixed chart types