Change color of a data point in line chart according to a condition - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Line Chart

Description

Change color of a data point in line chart according to a condition

Demo Code

ResultView the demo in separate window 


<html>
   <head> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.0-rc.2/Chart.js"></script> 
   </head> 
   <body> 
      <canvas id="updating-chart" width="500" height="300"></canvas> 
      <script>
var canvas = document.getElementById('updating-chart'),
    ctx = canvas.getContext('2d'),
    startingData = {//  w  w w. j  a  v  a2s . c o  m
      labels: [1, 2, 3, 4, 5, 6, 7],
      datasets: [
          {
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: [],
              pointStrokeColor: "#fff",
              pointBackgroundColor : [],
              pointRadius: 20,
              data: [65, 59, 80, 81, 56, 55, 40]
          },
      ]
    };
var myLiveChart = new Chart(ctx,{
  type: 'line',
  data: startingData
});
setInterval(function(){
  myLiveChart.data.datasets[0].pointBackgroundColor[2]= "rgb(0,0,0)"
  myLiveChart.update();
}, 500);

      </script>  
   </body>
</html>

Related Tutorials