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 line 2 is yellow. When line 1 is hidden line 2 is red and line 3 is yellow.

This might be confusing for users, so i want the lines to be assigned to specific columns. Is there a way?

I currently assign colors to the lines like so:

    colors: [red, yellow, green, blue]

This image might make things more clear.

When all lines are shown:

When line 1 is hidden:

I hope my question is clear.

EDIT: I also tried to assign the colors in the options.series as shown below, but with the same result

series: {
            0: { color: '#e2431e' ,targetAxisIndex: 0},
            1: { color: '#e7711b' ,targetAxisIndex: 1},
            2: { color: '#f1ca3a' ,targetAxisIndex: 0},
            3: { color: '#6f9654' ,targetAxisIndex: 0},       

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>