Google Visualization highlight single grid line

Question

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 my mistake? Or did I not understand something in your explanation? Here is the edited version :

  //Google Chart
   google.charts.load('current', {
   callback: function drawChart(peanut) {
     const div = document.createElement('div');
     div.id = peanut.color + peanut.mac.split(':').join('');
     $('#charts').appendChild(div);
     peanut.data = new google.visualization.DataTable();
     peanut.data.addColumn('datetime', 'Time');
     peanut.data.addColumn('number', '🥜 ' + peanut.label);
     for (var i = 0, len = localStorage.length; i < len; i++) {
       let dateTime = new Date(parseInt(localStorage.key(i)));
       let item = JSON.parse(localStorage.getItem(localStorage.key(i)));
       if (item.peanutMac === peanut.mac) {
         if (item.temperatureCelsius) {
           let temperature = parseFloat(item.temperatureCelsius);
           peanut.data.addRows([ [dateTime, temperature] ]);
         } else if (item.alert) {
           let data = parseInt(item.alert);
           peanut.data.addRows([ [dateTime, data] ]);
         }
       }
     }
     if (peanut.type == 'thermo') {
     peanut.chart = new google.visualization.LineChart($('#' + div.id));

       peanut.chartOptions = {
         interpolateNulls: true,
         fontName: 'Roboto',
         curveType: 'function',
         colors: [peanut.rgbColor],
         width: document.body.clientWidth,
         height: (window.innerHeight - 224) / 2,
         legend: 'none',
          lineWidth: 3,
          vAxis: { 
            format: '#.## °C',
            ticks: [15.00, 20.00, 25.00, 30.00, 35.00, 40.00]
          },
          hAxis: {
            gridlines: { 
             color: '#fff'
           }
         }
       };

      peanut.viewColumns = [];
      $.each(new Array(data.getNumberOfColumns()), function (colIndex) {
      peanut.viewColumns.push(colIndex);
      });
      peanut.viewColumns.push({
      calc: function () {
       return 35;
       },
           label: 'optical temperature limit',
           type: 'number'
       });
     } 

    peanut.view = new google.visualiation.DataView(data);
    peanut.view.setColumns(viewColumns);

     if (peanut.data.getNumberOfRows()) {
       peanut.chart.draw(peanut.view, peanut.chartOptions);
     }
   }
     packages:['corechart', 'table']
 });

Answer 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(new Array(data.getNumberOfColumns()), function (colIndex) {
      viewColumns.push(colIndex);
    });

    viewColumns.push({
      calc: function () {
        return 35;
      },
      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']
});

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