[Chartjs]-Changing color of specific ChartJS – AngularChartJS point

by

2👍

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>

1👍

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

1👍

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
        }
      ]
    }

0👍

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.

Leave a comment