Filling google chart chartArea with a gradient

Question

I've been exploring the features of google charts and now I'm trying to customize a scatter chart. I got the following function:

function drawScatterChart(){
    var data = google.visualization.arrayToDataTable([
          ['Chance', 'Impact'],
          [ 5,      4],
          [ 1,      2]
        ]);
    var options = {
          hAxis: {title: 'Chance', minValue: 0, maxValue: 5},
          vAxis: {title: 'Impact', minValue: 0, maxValue: 5},
          legend: 'none',
          'chartArea' : { 'backgroundColor' : '#F4F4F4' } 
        };
    var chart = new google.visualization.ScatterChart(document.getElementById('scatter_chart'));
    chart.draw(data, options);
}

This succesfully changes the background color of only the chartArea to gray, which is great. But now I'd like to implement a gradient that goes from the left bottom to the top right of the chart and containing 3 colors (green to yellow to red).

Is there any way to hack this into the chart since I've been trying to find anything in the documentation and only could find some old documentation (namely: https://developers.google.com/chart/image/docs/chart_params) but couldn't find a way to implement this.

Thanks!

Dr.Molle Dr.Molle · Accepted Answer · 2015-08-12T02:58:45

This chart will be created using SVG.
In SVG gradients will be created via the <linearGradient/>-element.

Take a look at http://tutorials.jenkov.com/svg/svg-gradients.html to see how these elements look like.

What you can do: When the chart has been drawn inject a <linearGradient/> into the <defs/> .

The styles may be set via CSS, but note: SVG has it's own style-properties, see: http://tutorials.jenkov.com/svg/svg-and-css.html

Demo:

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function() {
  var   container  = document.getElementById('chart_div'),
        data       = google.visualization.arrayToDataTable([
                      ['Chance', 'Impact'],
                      [ 5,      4],
                      [ 1,      2]
                    ]),
        options    = {
                      hAxis: {title: 'Chance', minValue: 0, maxValue: 5},
                      vAxis: {title: 'Impact', minValue: 0, maxValue: 5},
                      legend: 'none'
                     },
        chart      = new google.visualization.ScatterChart(container,options),
        createSVG  = function(n,a,b){
                      var xmlns = "http://www.w3.org/2000/svg",
                          e     = document.createElementNS (xmlns, n);
                      for(var k in a){
                        e.setAttributeNS (null, k,a[k]);
                      }
                      for(var k in b){
                        e.setAttribute (k,b[k]);
                      }
                      return e;
                    };

  google.visualization.events.addListener(chart, 'ready', function(){
    
    var gradient  =createSVG('linearGradient',{  
                                x1:0,y1:1,x2:1,y2:0
                              },{
                                id:'fx'
                              }
                            );
    document.getElementById('chart_div')
      .querySelector('svg>defs').appendChild(gradient);
    gradient.appendChild(createSVG('stop',{offset:'0%'}));
    gradient.appendChild(createSVG('stop',{offset:'50%'}));
    gradient.appendChild(createSVG('stop',{offset:'100%'}));
  });

  chart.draw(data, options);
});

html,body,#chart_div{
  height:100%;
  margin:0;
  padding:0;
}
#chart_div svg>g>rect { 
    fill: url(#fx) !important;
    fill-opacity:1 !important;
}

#fx stop:nth-child(1){ 
  stop-color: green; 
}
                
#fx stop:nth-child(2){ 
  stop-color: yellow;
}

#fx stop:nth-child(3){ 
  stop-color: red; 
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div  id="chart_div"></div>

Filling google chart chartArea with a gradient

1 Answers