Higlight single Grid Line in Google Chart

0
votes

Is it possible in Google Charts to highlight a single grid line of the y axis on a line chart, i.e. to give a different color or to draw thicker?

Example how it should look like:

enter image description here

2
chartsgoogle-visualizationlinechart

2 Answers

1
votes

you can manually change the gridlines, on the chart's 'ready' event...

the lines will be represented by svg <rect> elements,
y-axis gridlines will have height="1" and fill="#cccccc" (by default)
for dual y charts, there will be 2 <rect> elements per gridline...

see following working snippet... 

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1'],
    [1, 2, 300],
    [2, 3, 400],
    [3, 4, 500]
  ]);

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 48,
      left: 48,
      right: 64,
      bottom: 48
    },
    colors: ['#aa1221', '#0e2e22', '#6feee4'],
    height: '100%',
    series: {
      1: {
        targetAxisIndex: 1
      }
    },
    width: '100%',
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var gridlines = container.getElementsByTagName('rect');
    var highlightIndex = 2;
    var lineIndex = 0;
    var lineCount = 0;

    // determine number of gridlines
    Array.prototype.forEach.call(gridlines, function(line) {
      if ((line.getAttribute('height') === '1') && (line.getAttribute('fill') === '#cccccc')) {
        lineCount++;
      }
    });

    // gridlines doubled on dual y charts
    lineCount = lineCount / 2;

    // change gridlines
    Array.prototype.forEach.call(gridlines, function(line) {
      if ((line.getAttribute('height') === '1') && (line.getAttribute('fill') === '#cccccc')) {
        if (lineIndex === highlightIndex) {
          // change color
          line.setAttribute('fill', '#4a148c');
          // change "width"
          line.setAttribute('height', '5');
          // center on original y coord
          line.setAttribute('y', parseFloat(line.getAttribute('y')) - 2);
        }
        lineIndex++;
        if (lineIndex >= lineCount) {
          lineIndex = 0;
        }
      }
    });
  });

  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  }, false);
});
html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div"></div>
1
votes

Yes you can do that

enter image description here

JS

      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable
            ([['X', 'Style 1', 'Syle 2',
               'Style 3'],
              [1, 2, 3, 4],
              [2, 3, 4, 5],
              [3, 4, 5, 6]
        ]);

        var options = {
          hAxis: { maxValue: 5 },
          vAxis: { maxValue: 5 },
          chartArea: { width: 380 },

          series: {
            0: { lineWidth: 4 },
            1: { lineDashStyle: [2, 2] },
            2: { lineDashStyle: [4, 4] }
          },
           colors: ['#aa1221', '#0e2e22', '#6feee4']
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
}

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Read in detail what you can modify Customizing Lines