Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Diff Bar Chart - Change Bar Color

I have a Google Diff Bar chart. I am trying to change the color of the exterior bar. By default it is a faded color. I am able to change the inner bar color with color parameter under options. Can someone guide me out please? Here is my code below.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("visualization", '1.1', {packages:['corechart']});
    google.setOnLoadCallback(drawChart);
function drawChart() {
var oldData = google.visualization.arrayToDataTable([
  ['Name', 'Popularity'],
  ['Cesar', 250],
  ['Rachel', 4200],
  ['Patrick', 2900],
  ['Eric', 8200]
]);

var newData = google.visualization.arrayToDataTable([
  ['Name', 'Popularity'],
  ['Cesar', 370],
  ['Rachel', 600],
  ['Patrick', 700],
  ['Eric', 3500]
]);
var colChartDiff = new google.visualization.ColumnChart(document.getElementById('colchart_diff'));
var options = { 
diff: { newData: { widthFactor: 0.6 } },
legend: { position: 'top' } ,
colors: ['#f38eff', '#C0C0C0'],
backgroundColor: '#fffff5',
hAxis: {title: 'People'},
  vAxis: {title: 'Numbers'}};
var diffData = colChartDiff.computeDiff(oldData, newData);
colChartDiff.draw(diffData, options);
}
 </script>
like image 345
satishwin Avatar asked Jan 19 '26 17:01

satishwin


1 Answers

You can set that in the diff object, e.g.,

var options = { ...
    diff: { 
        oldData: { opacity: 1, color: '#e6693e' }, 
        newData: { opacity: 1}
    }...
 }
like image 197
Bob Avatar answered Jan 23 '26 21:01

Bob



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!