[Chartjs]-How to specify hover color angular-chart.js

by

2👍

✅

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']
};

Leave a comment