0

When I modify the column header colors using the event listener method shown here, I get a default gradient. The snippet example linked also is also showing the default gradient in the second column. How would I go about getting rid of the gradient when the color is generated by the event listener?

Community
  • 1
  • 1
Torey Price
  • 397
  • 5
  • 17
  • I think this link will help you https://developers.google.com/chart/interactive/docs/gallery/columnchart#labeling-columns – vignesh Jul 02 '16 at 09:27
  • @vignesh Are you referring to the annotations.boxStyle section under the Configuration options? – Torey Price Jul 02 '16 at 10:00

2 Answers2

2

you could use background instead of backgroundColor.

see following example...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Department');
    data.addColumn('number', 'Revenues');
    data.addRows([
      ['Shoes', 10700],
      ['Sports', -15400],
      ['Toys', 12500],
      ['Electronics', -2100],
      ['Food', 22600],
      ['Art', 1100],
      ['Web', 9999]
    ]);

    var container = document.getElementById('table_div');
    var table = new google.visualization.Table(container);
    google.visualization.events.addListener(table, 'ready', function () {
      container.getElementsByTagName('TR')[0].cells[1].style.background = 'magenta';
    });

    table.draw(data, {
      allowHtml: true
    });
  },
  packages: ['table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
0

@WhiteHat or you can disable the stupid background-image

.google-visualization-table .gradient {
    background-image: none;
}


google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Department');
    data.addColumn('number', 'Revenues');
    data.addRows([
      ['Shoes', 10700],
      ['Sports', -15400],
      ['Toys', 12500],
      ['Electronics', -2100],
      ['Food', 22600],
      ['Art', 1100],
      ['Web', 9999]
    ]);

    var container = document.getElementById('table_div');
    var table = new google.visualization.Table(container);

    table.draw(data, {
      allowHtml: true
    });
  },
  packages: ['table']
});
.google-visualization-table .gradient {
    background-image: none !important;
    background-color: "#eee";
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>
Hafiz Temuri
  • 3,882
  • 6
  • 41
  • 66