Google Visualization Highlight Single Grid Line

how can I highlight a single grid line? I would like to set an optical temperature limit at 35 ° C. Thanks! I have now added it to my code, but it does not work .... do you see m

Solution 1:

add another series with the value set to 35 for all rows

here, a data view is used to add a calculated column for the optical temperature limit

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn('number', 'y0');
    data.addColumn('number', 'y1');
    data.addColumn('number', 'y2');
    data.addRows([
      [1,  32.8, 20.8, 21.8],
      [2,  30.9, 29.5, 32.4],
      [3,  25.4,   27, 25.7],
      [4,  21.7, 28.8, 20.5],
      [5,  21.9, 27.6, 20.4]
    ]);

    var options = {
      interpolateNulls: true,
      fontName: 'Roboto',
      curveType: 'function',
      legend: 'none',
      lineWidth: 3,
      vAxis: {
        format: '#.## °C',
        ticks: [20.00, 25.00, 30.00, 35.00, 40.00]
      },
      hAxis: {
        gridlines: {
          color: '#fff'
        }
      }
    };

    var viewColumns = [];
    $.each(newArray(data.getNumberOfColumns()), function (colIndex) {
      viewColumns.push(colIndex);
    });

    viewColumns.push({
      calc: function () {
        return35;
      },
      label: 'optical temperature limit',
      type: 'number'
    });

    var view = new google.visualization.DataView(data);
    view.setColumns(viewColumns);

    var chart = new google.visualization.LineChart($('#chart').get(0));
    chart.draw(view, options);
  },
  packages:['corechart', 'table']
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="chart"></div>

Solution 2:

Its not the best and safest way but I didnt find something on the google documentation:

You could use Jquery for it Ive tried it on the example from google docs and it works click

var line = $("svg g line")[4]
$(line).attr('stroke','red');

Solution 3:

A simple way is to set the vAxis baseline to the value you want, say 35, and change the baselineColor. There is no option to change the width of this line, however, so if you need that, you should follow the suggestion above to add a series just to draw this line, and set its lineWidth.