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
Post a Comment