Search code examples
javascripthtmlcsschartsgoogle-visualization

Google Line Chart Colors?

I want to change the background color (into #262626) and font color (into white) in a Google Line Chart. I would also like to hide a line by clicking a button. Does anyone know how I could solve this?

I used this Chart: LineChart https://developers.google.com/chart/interactive/docs/gallery/linechart?hl=de#creating-material-line-charts

Thank you for Help :)

var S1 = 81;
var S2 = 77;
var S3 = 71;
var S4 = 69;
var S5 = 92;
var S6 = 169;
var S7 = 218;
var S8 = 169;
var S9 = 0;
var S10 = 0;
var S11 = 0;
var S12 = 0;
var S13=0;

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Tag', 'Deine Preise', 'Verlauf 1', 'Verlauf 2', 'Verlauf 3'],
          ['Mon AM',  S1, 150, 110, 100],
          ['Mon PM',  S2, 140, 105, 90],
          ['Tues AM',  S3, 130, 100, 78],
          ['Tues PM',  S4, 120, 140, 60],
          ['Wed AM', S5, 110, 120, 100],
          ['Wed PM', S6, 100, 200, 140],
          ['Thur AM', S7, 90, 380, 180],
          ['Thur PM', S8, 80, 240, 130],
          ['Fri AM', S9, 70, 200, 90],
          ['Fri PM', S10, 60, 120, 78],
          ['Sat AM', S11, 50, 100, 60],
          ['Sat PM', S12, 40, 90, 57]
        ]);


  var options = {
            width: 1100,
            height: 600,
            colors: ['#2979FF','#FF7728','#E8471A','#FF2D1C'],
            chart: {
              title: 'Preis',
              subtitle: 'Verlauf mit Bespielen',
            },
            }


        var chart = new google.charts.Line(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
body{
  background: #262626;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Index</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="app.js">
    </script>
  </head>
  <body>
  <div id="curve_chart"></div>
  </body>
</html>

Solution

  • first, when using a material chart, need to convert the options to material options,
    using the following static method... 

    google.charts.Line.convertOptions(options)

    as for background color, you can use the following option... 

    backgroundColor: {
  fill: '#262626'
},

    text color can be applied using the following options... 

    titleTextStyle: {
  color: '#ffffff'
},
hAxis: {
  textStyle: {
    color: '#ffffff'
  }
},
vAxis: {
  textStyle: {
    color: '#ffffff'
  }
}

    as for hiding a line, the following working snippet includes an example of clicking the legend entries to hide / show the line... 

    var S1 = 81;
var S2 = 77;
var S3 = 71;
var S4 = 69;
var S5 = 92;
var S6 = 169;
var S7 = 218;
var S8 = 169;
var S9 = 0;
var S10 = 0;
var S11 = 0;
var S12 = 0;
var S13 = 0;
var color = ['lime','cyan','magenta','yellow'];

google.charts.load('46', {
  'packages': ['line']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Tag', 'Deine Preise', 'Verlauf 1', 'Verlauf 2', 'Verlauf 3'],
    ['Mon AM', S1, 150, 110, 100],
    ['Mon PM', S2, 140, 105, 90],
    ['Tues AM', S3, 130, 100, 78],
    ['Tues PM', S4, 120, 140, 60],
    ['Wed AM', S5, 110, 120, 100],
    ['Wed PM', S6, 100, 200, 140],
    ['Thur AM', S7, 90, 380, 180],
    ['Thur PM', S8, 80, 240, 130],
    ['Fri AM', S9, 70, 200, 90],
    ['Fri PM', S10, 60, 120, 78],
    ['Sat AM', S11, 50, 100, 60],
    ['Sat PM', S12, 40, 90, 57]
  ]);


  var options = {
    width: 1100,
    height: 600,
    colors: ['#2979FF', '#FF7728', '#E8471A', '#FF2D1C'],
    chart: {
      title: 'Preis',
      subtitle: 'Verlauf mit Bespielen',
    },
    backgroundColor: {
      fill: '#262626'
    },
    titleTextStyle: {
      color: '#ffffff'
    },
    hAxis: {
      textStyle: {
        color: '#ffffff'
      }
    },
    vAxis: {
      textStyle: {
        color: '#ffffff'
      }
    },
    colors: ['cyan', 'yellow', 'magenta', 'lime']
  }


  var chart = new google.charts.Line(document.getElementById('curve_chart'));

  var columns = [];
  var series = {};
  for (var i = 0; i < data.getNumberOfColumns(); i++) {
    columns.push(i);
    if (i > 0) {
      series[i - 1] = {};
    }
  }
  
  google.visualization.events.addListener(chart, 'select', function () {
    var sel = chart.getSelection();
    // if selection length is 0, we deselected an element
    if (sel.length > 0) {
      // if row is null, we clicked on the legend
      if (sel[0].row === null) {
        var col = sel[0].column;
        if (columns[col] == col) {
          // hide the data series
          columns[col] = {
            label: data.getColumnLabel(col),
            type: data.getColumnType(col),
            calc: function () {
              return null;
            },
          };

          // grey out the legend entry
          series[col - 1].color = '#CCCCCC';
        }
        else {
          // show the data series
          columns[col] = col;
          series[col - 1].color = null;
        }
        options.series = series;
        var view = new google.visualization.DataView(data);
        view.setColumns(columns);
        chart.draw(view, google.charts.Line.convertOptions(options));
      }
    }    
  });

  chart.draw(data, google.charts.Line.convertOptions(options));
}
    body {
  background: #262626;
}
    <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Index</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="app.js">
  </script>
</head>

<body>
  <div id="curve_chart"></div>
</body>

</html>