How to specify hover color angular-chart.js

Question

I'm using the angular version of chartJS. I've a pie chart and want to specify the hover color of the arcs.

Apparently someone already managed to do that: https://github.com/jtblin/angular-chart.js/issues/131#issuecomment-246598518, but I don't understand how.

Here is my try: http://plnkr.co/edit/1irEj30D9NfRX9qu9H12?p=preview

So basically

$scope.colors = [
  {
    backgroundColor: '#A2DED0',
    borderColor: '#A2DED0',
    hoverBackgroundColor: '#A2DED0',
    hoverBorderColor: '#A2DED0'
  }
]

<canvas chart-colors="colors"></canvas>

Answer 1

The solution is to use chart-dataset-override. These examples helped me a lot: https://github.com/jtblin/angular-chart.js/blob/master/examples/dataset-override.html https://github.com/jtblin/angular-chart.js/blob/master/examples/dataset-override.js

<canvas class="chart chart-doughnut" chart-data="ringChartData.data" chart-labels="ringChartData.labels" chart-options="ringChartData.options" chart-dataset-override="datasetOverride" height="100">
</canvas>

$scope.ringChartData = {
    labels: [],
    data: [],
    options: {
        elements: {
            arc: { 
                borderWidth: 0.7
            }
        },
        legend: {
            display: true,
            position: 'bottom',
            labels: {
                boxWidth: 12
            }
        },
        tooltips: {
            enabled: true,
            callbacks: {
                label: function(tooltipItem, data) {
                    return data.labels[tooltipItem.index] + ': ' + data.datasets[0].data[tooltipItem.index] + ' ' + tooltipSuffix;
                }
            }
        }
    }
};

$scope.datasetOverride = {
    backgroundColor: ['#383a4e', '#A04d4d', '#ff8c00', '#413041', '#7b6888', '#6b486b', '#d68c5b', '#d0743c'],
    hoverBackgroundColor: ['#22243a', '#822e2e', '#c66d00', '#2d1a2d', '#634d72', '#533253', '#B66734', '#AF561E'],
    hoverBorderColor: ['#22243a', '#822e2e', '#c66d00', '#2d1a2d', '#634d72', '#533253', '#B66734', '#AF561E']
};