CODEWITHSUNDEEP
angularjschart.jsangular-chartchart.js2
medaak
medaak

Reputation: 13

angular-chart.js : issue with pointHoverBorderColor property for line chart

I'm using input color as an object but property "pointHoverBorderColor" isn't working using :

angular : 1.5.3,

chart.js : 2.6.0,

angular-chart.js : 1.1.1.

vm.colors = [ { 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)" },
"rgba(250,109,33,0.5)",
"#9a9a9a","rgb(233,177,69)" ];

for

<canvas id="line" class="chart chart-line" chart-data="vm.data" 
chart-colors="vm.colors" chart-labels="vm.labels" chart-series="vm.series" 
chart-options="vm.options" chart-dataset-override="vm.datasetOverride" 
chart-click="vm.onClick"></canvas>

Image is below, the point stays black when hovered:

enter image description here

Upvotes: 1

Views: 621

Answers (1)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32879

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>

Upvotes: 1

Related Questions