CODEWITHSUNDEEP
javascripthtmlcssgoogle-visualization
Davit Nugroho
Davit Nugroho

Reputation: 13

How to remove white border in stacked column google chart?

I want to remove the white border in stacked column google chart. Can someone help me?

this is what I mean : my current chart

Upvotes: 1

Views: 1764

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

use a 'style' column role to remove white border

to actually remove it, you could use...

stroke-width: 0;

or

stroke-color: transparent;

but this will allow the background color to show through,
and will look the same visually on a white background

instead, recommend using the same stroke-color as being used for each series

see following working snippet, a DataView is used to add two 'style' columns 

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

function drawChart() {
  var seriesColors = ['#0097A7', '#26C6DA'];

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'y1');
  data.addColumn('number', 'y2');
  data.addRows([
      ['Jan', 10500000, 1500000],
      ['Feb', 4500000, 400000],
      ['Mar', 7000000,800000],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
      type: 'string',
      role: 'style',
      calc: function (dt, row) {
        return 'stroke-color: ' + seriesColors[0];
      }
    }, 2, {
      type: 'string',
      role: 'style',
      calc: function (dt, row) {
        return 'stroke-color: ' + seriesColors[1];
      }
    }
  ]);

  var options = {
    colors: seriesColors,
    height: 400,
    isStacked: true,
    legend: 'none',
    width: 400
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  chart.draw(view, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions