[Solved]-Using CSS variables (color) with chart.js - "var(--primaryColor)" not working-Chart.js

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>

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>