Google Pie Chart (Doughnut) Outer Color Change On Hover

3
votes

My issue is a bit hard to explain so I'm attaching two images below which should explain the "outer color" I'm looking to change.

My results are currently the standard google charts behavior. When I hover over a slice I get a semi-transparent variant of that color on the outer part of the slice.

Google Chart Hover Color Standard Behavior

I would like to make the transparent grey to be the same color as the slice, just like this:

Desired Google Chart Color Behavior

Does anyone out there know if this is possible? I've looked through the documentation but am either missing the configuration option for this or it just does not exist. Thank you!

Also my current code can be found here:

function drawChart() {
var data = google.visualization.arrayToDataTable([
    ['Savings Category', 'Savings'],
    ['Trade Savings', 11],
    ['Shipping Savings', 20],
    ['Bulk Savings', 12],
    ['Promo Savings', 12],
]);

var options = {
    pieHole: 0.8,
    legend: 'none',
    height: '100%',
    width: '100%',
    pieSliceText: 'none',
    backgroundColor: '#f8f5f3',
    colors: ['#0066a6', '#54c0e8', '#cccccc', '#818181'],
    chartArea: {
        height: '90%',
        width: '90%',
    },
    slices: [{offset: 0.05}, {offset: 0.05}, {offset: 0.05}, {offset: 0.05}],
    tooltip: {
        trigger: 'selection'
    },
    pieResidueSliceColor: "yellow"
};
2
javascripthtmlcsschartsgoogle-visualization
not possible out of the box. you could use a mutation observer to know when the slice is hovered, then manually change the chart element... - WhiteHat
HEY was actually able to figure this out via css attribute selector, will post on this thread, thanks for your advice! - sjr765

2 Answers

0
votes

sjr765 is pretty close, the only thing you need is to change the dynamic path (created on mouse over) opacity this way:

#donut_single path {
    stroke-opacity: 1 !important;
}

Full code below:

google.charts.load('current', {
    'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Savings Category', 'Savings'],
        ['Trade Savings', 11],
        ['Shipping Savings', 20],
        ['Bulk Savings', 12],
        ['Promo Savings', 12],
    ]);

    var options = {
        pieHole: 0.8,
        legend: 'none',
        height: '100%',
        width: '100%',
        pieSliceText: 'none',
        backgroundColor: '#f8f5f3',
        colors: ['#0066a6', '#54c0e8', '#cccccc', '#818181'],
        chartArea: {
            height: '90%',
            width: '90%',
        },
        slices: [{
            offset: 0.05
        }, {
            offset: 0.05
        }, {
            offset: 0.05
        }, {
            offset: 0.05
        }],
        tooltip: {
            trigger: 'selection'
        },
        pieResidueSliceColor: "yellow"
    };
    var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
    chart.draw(data, options);
};
#donut_single path {
    stroke-opacity: 1 !important;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_single" style="width: 300px; height: 300px;"></div>

Also on JSFiddle

0
votes

I was able to solve this with the following css trick!

path[stroke-width="6.5"] {
  stroke: #818181;
  stroke-opacity: 1;
}

This will make every border the same color, however, so based on my larger code set I was able to dynamically change the border color with jquery based on which element was being selected via the chart event. Jquery selector here:

$("path[stroke-width='6.5']").css({
        "stroke": colors[currSlice[0]],
        "stroke-opacity": "1",
      })

It's dynamic based on this hardcoded object which is matched to the inputted row data given by the chart event.

 var rows = [
    ['Savings Category', 'Savings'],
    ['TradeMaster Savings', 11,],
    ['Shipping Savings', 20],
    ['Bulk Savings', 12],
    ['Promo Savings', 12],
  ];

  var colors = {
    "TradeMaster Savings": '#0066a6',
    "Shipping Savings": '#54c0e8',
    "Bulk Savings": '#cccccc',
    "Promo Savings": '#818181',
  }

UPDATE

You can actually just update the opacity since the library already assigns it the same color, find below!

path[stroke-width="6.5"] {
  stroke-opacity: 1;
}

or

$("path[stroke-width='6.5']").css({
        "stroke-opacity": "1",
      })