how do you use custom colors on google gauge chart with apps script

Viewed 573

i've created a function in apps script that pulls data from one google sheet (sht_data) and serves up a gauge chart in another google sheet (sht_charts).

function new_renewable_gauge() {
  var range = sht_data.getRange('B16:C16');
  var chartBuilder = sht_data.newChart();
  chartBuilder.addRange(range)
      .setChartType(Charts.ChartType.GAUGE)
      .setPosition(1, 7, 1, 1)
      .setOption('title', 'renewable % of committed generation')
      .setOption('yellowFrom', 50)
      .setOption('yellowTo', 70)
      .setOption('greenFrom', 70)
      .setOption('greenTo', 100)
      .setOption('minorTicks', 5);
  sht_chart.insertChart(chartBuilder.build());
}

pulling and presenting the data works fine, no issues. where i get stuck is setting colors other than green / yellow / red for the shaded areas on the gauge. what i want to use is the gradients of green in the google palette, i.e. light green 3 (40-60) / light green 1 (60-80) / dark green 2 (80-100).

i've tried searching the net for how to define theses colors... no joy. things i've tried:

  • initially i tried .setOption('lightGreenFrom', 40).setOption('lightGreenTo', 60) but the chart returned white space
  • setting the colors first .setOption(colors, [lightGreen, green, darkGreen]) on a COLUMN chart first to see if it will accept the color names; only green was accepted
  • numerous ways of writing those colors (lightgreen3, lightGreen3, light-green-3, light-green3, light_green_3, light_green3) with a COLUMN in case there was a specific way of writing those names; not recognized

any help that the community can offer would be greatly appreciated.

1 Answers

according to the configuration options,
to change the actual colors,
you can use the following options --> 'greenColor', 'yellowColor', 'redColor'

as for the color values,
you'll need to find the html hex values of the names.
e.g.

.setOption('greenColor', '#c8e6c9')
.setOption('yellowColor', '#4caf50')
.setOption('redColor', '#1b5e20')

here is a pallette, originally developed by google...

https://htmlcolorcodes.com/color-chart/material-design-color-chart/

Related