Changing color of specific ChartJS - AngularChartJS point

Question

I have a line chart made with AngularJS - http://jtblin.github.io/angular-chart.js/#getting_started - Chart.js.

<canvas id="line" class="chart chart-line" data="data"
  labels="labels" legend="true" series="series"
  click="onClick" options="options">
</canvas> 

$scope.labels = labels_filtered;
$scope.series = [word];
$scope.data = [_.values(response.graph_values)];

Is it possible to set a different color for some point in the graph depending on some conditions? (for example: for points with value > 10 set color red, else set color green)

[Edit] Link to small demo: http://plnkr.co/edit/S0W5wPznMu4bCxRjOppl?p=preview . What I would like is to set the colors of the dots with 80,81 values with red and the other points with another color.

Thanks.

Cyrbil Cyrbil · Accepted Answer · 2015-06-14T11:48:24

You will have to manually set point color of your chart:

myLineChart.datasets[0].points[4].fillColor = "rgba(000,111,111,55)" ;

Example:

(function() {
  var app = angular.module("Line_Chart", ["chart.js"]);
  app.controller('LineChartController', function($scope) {
    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Series B'];
   
    $scope.data = [
      [65, 59, 80, 81, 56, 55, 40]  
    ];
    
    $scope.onClick = function(points, evt) {
      console.log(points, evt);
    };
    
    $scope.$on("create", function(evt, chart) {
      chart.datasets[0].points[4].fillColor = "red";
      chart.update();
    });
  });  
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://rawgit.com/jtblin/angular-chart.js/02639948a90edf92f018804ec25baea9fef71a84/angular-chart.js"></script>

    <body ng-app="Line_Chart">
      <div ng-controller="LineChartController">
        <canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" click="onClick" options="options" colours="colours" chart="mychart">
        </canvas>
      </div>
    </body>

Changing color of specific ChartJS - AngularChartJS point

4 Answers