How to add colors to spefic columns in Google Charts

Question

I have a chart with 4 lines in different colors. Using checkboxes I can hide/show specific lines. Now when all the lines are showed (all boxes checked) line 1 is red and lin

Answer 1

you could assign the color as a column property on the data table

then build the colors array based on the visible columns

see following working snippet...

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Year');
  data.addColumn('number', 'Q1');
  data.addColumn('number', 'Q2');
  data.addColumn('number', 'Q3');
  data.addColumn('number', 'Q4');

  data.addRow(['January 2016', 500, 100, 1200, 1000]);
  data.addRow(['February 2016', 500, 100, 1975, 1000]);
  data.addRow(['March 2016', 500, 100, 1200, 1000]);
  data.addRow(['April 2016', 500, 100, 1200, 1000]);

  var colors = ['red', 'yellow', 'green', 'blue'];
  colors.forEach(function (color, index) {
    data.setColumnProperty(index + 1, 'color', color);
  });

  var options = {
    chartArea: {
      top: 12,
      right: 0,
      bottom: 72,
      left: 72
    },
    legend: {
      position: 'bottom'
    },
    colors: colors,
    hAxis: {
      slantedText: true
    },
    vAxis: {
      title: 'Amount',
      viewWindow: {
        max: 2000
      }
    },
    bar: {
      groupWidth: '90%'
    },
    height: 400
  };

  $('.series-chk').on('change', drawChart);
  $(window).resize(drawChart);
  drawChart();

  function drawChart() {
    var chartColors = [];
    var chartColumns = [0];
    var view = new google.visualization.DataView(data);

    $.each($('.series-chk'), function (index, checkbox) {
      var seriesColumn = parseInt(checkbox.value);
      if (checkbox.checked) {
        chartColumns.push(seriesColumn);
        chartColors.push(data.getColumnProperty(seriesColumn, 'color'));
      }
    });
    view.setColumns(chartColumns);
    options.colors = chartColors;
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(view, options);
  }
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input class="series-chk" id="chk-0" type="checkbox" value="1" checked /><label for="chk-0">Series 0</label>
<input class="series-chk" id="chk-1" type="checkbox" value="2" checked /><label for="chk-1">Series 1</label>
<input class="series-chk" id="chk-2" type="checkbox" value="3" checked /><label for="chk-2">Series 2</label>
<input class="series-chk" id="chk-3" type="checkbox" value="4" checked /><label for="chk-3">Series 3</label>
<div id="chart_div"></div>