CODEWITHSUNDEEP
csschartsgoogle-visualization
Kasim Jasarevic
Kasim Jasarevic

Reputation: 79

Google Pie chart: remove border around of pie slices

How can I remove the border around of slices on a Google Pie Chart on mouse hover?

enter image description here

Upvotes: 1

Views: 2964

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

the only standard option that will remove the border on mouse over is... 

enableInteractivity: false

but this will also disable the tooltip

otherwise, you can override using css, the border is created by an svg ellipse element

it is the only ellipse with a stroke-width of 6.5, so... 

ellipse[stroke-width="6.5"] {
  stroke: transparent;
}

see following working snippet... 

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['a', 30]
    ]);

    var options = {
      legend: 'none'
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});
ellipse[stroke-width="6.5"] {
  stroke: transparent;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

EDIT

when more than one value exists, path elements are used for the border, add... 

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

Upvotes: 1

Related Questions