Alter the hue within Google Chart

Question

Alter the hue within Google Chart

I'm working on customizing a Google Bar Chart with Material design and running into an issue with changing the background color. I've tried using backgroundColor and fill identifiers in the options, but the inner area of the chart where the data is displayed remains white. Here's the code I've been working with:

 var barchart_options = {
            width: 600,
            height:350,
            backgroundColor : '#CFC3F8',

            .......

When attempting to use the fill identifier, I updated the code like this:

backgroundColor : {fill:'#CFC3F8'},

I even took a screenshot to show the issue:

https://i.sstatic.net/kKWtz.png

javascript jsp google-visualization

Answer 1

Answer №1

there is also a possibility to set the backgroundColor of the chart area

var preferences = {
  backgroundColor: '#CFC3F8',
  chartArea: {
    backgroundColor: '#CFC3F8'
  }      
};

only the color is required

check out the snippet below for a working example...

google.charts.load('current', {
  callback: drawChart,
  packages: ['bar']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
  ]);

  var options = {
    backgroundColor: 'magenta',
    chartArea: {
      backgroundColor: 'cyan'
    }
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));

  chart.draw(data, google.charts.Bar.convertOptions(options));
}

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

Answer 2

there is also a possibility to set the backgroundColor of the chart area

var preferences = {
  backgroundColor: '#CFC3F8',
  chartArea: {
    backgroundColor: '#CFC3F8'
  }      
};

only the color is required

check out the snippet below for a working example...

google.charts.load('current', {
  callback: drawChart,
  packages: ['bar']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
  ]);

  var options = {
    backgroundColor: 'magenta',
    chartArea: {
      backgroundColor: 'cyan'
    }
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));

  chart.draw(data, google.charts.Bar.convertOptions(options));
}

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

Alter the hue within Google Chart

Answer №1

Similar questions

Store image selection in state

Ways to authenticate custom kinds in JSON schema?

How to determine if a scrolling action is initiated manually using jQuery

Stop the page from scrolling when scrolling within a specific DIV to address the [Violation] warning appearing in the console

What is the process for exporting data from MongoDB?

Can default query parameters be predefined for a resource in AngularJS?

How can I adjust iframe content to fit properly on a mobile device screen?

A custom class that uses toggleClass() does not trigger an alert upon a click event

Implement dynamic configuration injection by allowing users to specify the name of a configuration file during runtime, instead of having it fixed in the code

Performing a password-protected JavaScript Ajax request that includes special characters

Integrating webpack and Vue async components from separate projects or domains

Tips for bringing in and taking out data in Vue

The browser sends a request for a file, the server then downloads a pdf, and finally, the

After reaching the conclusion, the code restarts

Encountered an npm installation error: The rollbackFailedOptional issue arose during the npm session with the verb npm-session a0d68 while attempting the command npm install --save

Tips for resolving the error: finding the right loader for handling specific file types in React hooks

Using ng-checked directive with a radio button in AngularJS

When attempting to call a bundle file using browserify from React, an unexpected character '�' Syntax error is thrown: react_app_testing/src/HashBundle.js: Unexpected character '�' (1:0

Unable to access the 'fn' property of undefined in Handlebars causing a TypeError

What is the method to spin an item in three js while keeping its axis in focus?