Changing color of specific ChartJS - AngularChartJS point

Question

Changing color of specific ChartJS - AngularChartJS point

6.9k views Asked by IceWhisper At 14 June 2015 at 10:38

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.

Original Q&A

There are 4 answers

**potatopeelings** · Answer 1 · 2015-06-14 12:47:13

I don't think the angular version exposes the chart points directly.

But you could use the animation complete handler to update the point colors once the rendering is done. You can set the animation complete handler using the ChartJsProvider that the angular-chart.js provides

  var app = angular.module("Line_Chart", ["chart.js"]).config(function(ChartJsProvider) { 
    ChartJsProvider.setOptions({ onAnimationComplete: function(){
      this.datasets[0].points[2].fillColor = "red";
      this.update()
    } }); 
  })

Plunkr - http://plnkr.co/edit/ggqcmpkhFXsinnm9aDbM?p=preview

**IceWhisper** · Answer 2 · 2015-06-14 21:01:25

I found another approach, but it is not the best solution.

In the file Chart.js I have changed this section of code by putting [index] to the pointColor object:

helpers.each(dataset.data,function(dataPoint,index){   
   datasetObject.points.push(new this.PointClass({
      value : dataPoint,
      label : data.labels[index],
      datasetLabel: dataset.label,
      strokeColor : dataset.pointStrokeColor,
      fillColor : dataset.pointColor[index],

and in the Angular Controller I put this line:

$scope.colours = [{pointColor:colours, fillColor: "#E7EDF0", strokeColor: "#A9C4D2"}];

where colours is an array of colors for each point in the graph.

*To make sure that is also accepts single values, one solution would be to check the type of object dataset.pointColor is and use it as single value or array.

**Cyrbil** · Answer 3 · 2015-06-14 11: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>

**SnapJosh** · Answer 4 · 2017-03-23 15:12:34

Solutions that utilize chart.datasets[0].points[4].fillColor = "red"; type code no longer work in chart.js v2+.

However, dataset properties such as pointBorderColor accept arrays, which can be really useful. This lets you create an array of colors (or other properties) and you can set different properties for specific data points. You can also access the property in the array later and change it.

Example:

data: {
      labels: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
      datasets: [
        {
          fill: false,
          lineTension: 0.4,
          backgroundColor: [ "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)" ],
          borderColor: "rgba(117, 201, 196, 0.8)",
          borderCapStyle: 'butt',
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          pointBorderColor: [ "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)" ],
          pointBackgroundColor: [ "#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff" ],
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: [ "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)" ],
          pointHoverBorderColor: "rgba(220,220,220,1)",
          pointHoverBorderWidth: 2,
          pointRadius: [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
          pointHitRadius: 10,
          data: [ 1, 3, 6, 12, 18, 28, 17, 10, 3, 2 ],
          spanGaps: false
        }
      ]
    }

TechQA.

Changing color of specific ChartJS - AngularChartJS point

There are 4 answers

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in CHART.JS

Related Questions in ANGULAR-CHART

Popular Questions

Popular Tags

Trending Questions