title: Add lines to Google Bubble Chart
body: <p>I am learning to use Google Charts and I'm trying to add vertical and horizontal lines into my bubble chart (see the chart on <a href="https://jsfiddle.net/fckz2qyu/" rel="nofollow noreferrer">fiddle</a>). </p>
  
  <pre><code>  &lt;div id="series_bubble_div" style="width: 1300px; height: 600px;"&gt;&lt;/div&gt;
      &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
           google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawSeriesChart);
  
      function drawSeriesChart() {
  
          var data = google.visualization.arrayToDataTable([
            ['May', 'Profit', 'Loss', 'Color', 'Amount'],
            ['One', -0.0200677317826359, 0.00783908666680255, "Blue", 2.90062193473149],
            ['Two', -0.000769939209045673, -0.000869129717442352, "Red", 0.393370989830078],
            ['Three', 0.231046771318721, -0.023, "Blue", 4.22746171],
            ['Four', -0.11516787308815, 0.0307, "Red", 1.58054636957],
            ['Five', -0.156171745810591, 0.002, "Blue", 4.478502636],
            ['Six', -0.0539915684061078, 0.0117, "Red", 1.396314864],
            ['Seven', -0.00718037723705341, -0.011, "Blue", 1.31638390999998],
            ['Eight', -0.0562574430733049, 0.0411, "Red", 8.39198070530399],
            ['Nine', 0.235522678055354, -0.005, "Blue", 8.70835673000001],
            ['Ten', 0.226171773714415, -0.0164, "Red", 5.66191157875001],
            ['Eleven', -0.0805926930562123, -0.00600000000000001, "Blue", 4.74257550999999],
            ['Twelve', 0.0642371105755089, 0.0675, "Red", 0.630424760336]
          ]);
  
          var options = {
              title: 'My graph, May 2017',
              hAxis: {title: 'Profit',format: 'percent', minValue: -0.05, maxValue: 0.10 },
              vAxis: {title: 'Loss',format: 'percent', minValue: -0.03, maxValue: 0.06 },
              bubble: { textStyle: { fontSize: 11 } },
              axisTitlesPosition: 'out'
  
          };
  
          var chart = new google.visualization.BubbleChart(document.getElementById('series_bubble_div'));
  
                 chart.draw(data, options);
                 }
      &lt;/script&gt;
  </code></pre>
  
  <p>In the picture below is the effect, that I want to achieve. Horizontal lines should be at +1.5% and -1.5%, vertical lines at +7% and -7%. The area between the lines should have another color than the rest of the chart area.</p>
  
  <p>Do you have any idea, how to reach it?</p>
  
  <p><a href="https://i.stack.imgur.com/2kzT5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2kzT5.png" alt="Desired result of bubble chart with lines"></a></p>