javascript - Changing color of specific ChartJS - AngularChartJS point -


i have line chart made 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 possible set different color point in graph depending on conditions? (for example: points value > 10 set color red, else set color green)

[edit] link small demo: http://plnkr.co/edit/s0w5wpznmu4bcxrjoppl?p=preview . set colors of dots 80,81 values red , other points color.

thanks.

you have manually set point color of 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>


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -