Is it possible to add two colors to the graphic area or have two colors in the points?

Question

I created a react component with a graph of the react-google-charts.

It is an easy graphic. It has these data and these options.

const options = {
        annotations: {
          stem: {
            color: '#097138'
          },
          style: 'line'
        },
        legend: 'none',
        chartArea:{
            top:5,
            width:"80%",
            height:"80%"
          }
      };

const data = [
            ['Year', {role: 'annotation', type: 'string'}, 'Value'],
            ['2020', null, 48.92],
            ['2025', '5 years', 49.45],
            ['2030', null, 49.24],
            ['2035', null, 50.93],
            ['2040', null, 49.62]
          ];

And here is the return with the Chart component.

        return (
            <div >
               <Chart
                    chartType="ScatterChart"
                    data={data}
                    width={width}
                    height={height}
                    options={options}/>
            </div>
        );

This graph shows a data per year and I need that from the year 2025, the area of the graph appear in gray and if that can not be, that the points go gray.

This is possible? Any ideas?

Thank you

Answer 1

you can easily change the points using a style column after the value column.
use null values to return the default color, or supply an html color for the gray points.

const data = [
  ['Year', {role: 'annotation', type: 'string'}, 'Value', {role: 'style', type: 'string'}],
  ['2020', null, 48.92, null],
  ['2025', '5 years', 49.45, null],
  ['2030', null, 49.24, 'gray'],
  ['2035', null, 50.93, 'gray'],
  ['2040', null, 49.62, 'gray']
];

see following working snippet for an example...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  const data = [
    ['Year', {role: 'annotation', type: 'string'}, 'Value', {role: 'style', type: 'string'}],
    ['2020', null, 48.92, null],
    ['2025', '5 years', 49.45, null],
    ['2030', null, 49.24, 'gray'],
    ['2035', null, 50.93, 'gray'],
    ['2040', null, 49.62, 'gray']
  ];
  var options = {
    annotations: {
      stem: {
        color: '#097138'
      },
      style: 'line'
    },
    legend: 'none',
    chartArea:{
      top:5,
      width:"80%",
      height:"80%"
    }
  };
  var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
  chart.draw(google.visualization.arrayToDataTable(data), options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

EDIT

to change the background color, we can use an area series.

in order to fill the entire chart area,
the area series will need to have the same value as the max y-axis value.
then we can turn off interactivity, hide from the legend, etc.

    series: {
      1: {
        areaOpacity: 0.6,
        color: 'gray',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      }
    }

see following working snippet...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  const data = [
    ['Year', {role: 'annotation', type: 'string'}, 'Value', 'Area'],
    ['2020', null, 48.92, null],
    ['2025', '5 years', 49.45, 51],
    ['2030', null, 49.24, 51],
    ['2035', null, 50.93, 51],
    ['2040', null, 49.62, 51]
  ];
  var options = {
    annotations: {
      stem: {
        color: '#097138'
      },
      style: 'line'
    },
    legend: 'none',
    chartArea:{
      top:5,
      width:"80%",
      height:"80%"
    },
    series: {
      1: {
        areaOpacity: 0.6,
        color: 'gray',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      }
    }
  };
  var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
  chart.draw(google.visualization.arrayToDataTable(data), options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>