chart.js css var

by Ali Khaled

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" height="300" width="500"></canvas>

CSS

:root {
  --primaryColor: #00ff00;
  --chartColor: #ff0000;
}

JavaScript

var style = getComputedStyle(document.body);
var primCol = style.getPropertyValue('--primaryColor');
var chartCol = style.getPropertyValue('--chartColor');

var chartData = {
  labels: ['a', 'b', 'c', 'd', 'b', 'c', 'd'],
  datasets: [{
    label: 'value',
    backgroundColor: 'rgba(219, 20, 0, 0.2)',
    borderColor: chartCol,
    data: [0,2,3,4, 0,2,3,4]
  }]
};

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
        }
      }],
    }
  }
});