[Chartjs]-Angular-chart.js : issue with pointHoverBorderColor property for line chart

by

1👍

✅

You are assigning dataset options for the wrong controller. Instead of assinging it to vm.colors , you need to assign it for vm.datasetOverride , like so …

vm.datasetOverride = [{
   backgroundColor: "rgba(159,204,0, 0.2)",
   pointBackgroundColor: "rgba(159,204,0, 1)",
   pointHoverBackgroundColor: "rgba(159,204,0, 0.8)",
   borderColor: "rgba(159,204,0, 1)",
   pointBorderColor: '#fff',
   pointHoverBorderColor: "rgba(159,204,0, 1)",
   fill: false
}];

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var app = angular.module('app', ['chart.js']);

app.controller("LineCtrl", ['$scope', function(vm) {
   vm.labels = ["January", "February", "March", "April", "May", "June"];
   vm.data = [
      [65, 59, 80, 81, 56, 55]
   ];
   vm.datasetOverride = [{
      backgroundColor: "rgba(159,204,0, 0.2)",
      pointBackgroundColor: "rgba(159,204,0, 1)",
      pointHoverBackgroundColor: "rgba(159,204,0, 0.8)",
      borderColor: "rgba(159,204,0, 1)",
      pointBorderColor: '#fff',
      pointHoverBorderColor: "rgba(159,204,0, 1)",
      fill: false
   }];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<div ng-app="app" ng-controller="LineCtrl">
    <canvas id="line" class="chart chart-line" chart-data="data" chart-colors="colors" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick"></canvas>
</div>

Leave a comment