CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Grace
Grace

Reputation: 21

How to add dash gridline on google chart after load?

I want to add dash grid line on google chart

this are the options that i'm using now

hAxis: {
        textStyle: { color: '#757575', },
        titleTextStyle: { color: '#757575',},
        minorGridlines: { color: 'transparent' },
        format : "MMM yy",
        gridlines: {color: '#f1efef',},
      },
      vAxis: {
        format: '#\'%\'',    
        textStyle: { color: '#757575' },
        titleTextStyle: { color: '#757575' },
        minorGridlines: { color: 'transparent' },
        gridlines: {color: '#f1efef',},
      },
}

here is an example

Upvotes: 1

Views: 1649

Answers (2)

WhiteHat
WhiteHat

Reputation: 61212

there are no config options available out of the box in order to change the style of the gridlines.

however, we can change the gridlines manually in the svg, on the chart's 'ready' event.

the issue here is that for the gridlines, google uses a <rect> element,
with either a height (vAxis) or width (hAxis) of 1 and no border.
so the fill color is what actually makes the line, not the stroke or border.

in order to change these <rect> elements to appear dashed,
we need to use a fill pattern, as follows.

<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
  <pattern id="pattern-fill" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(30)">
     <rect x="0" y="0" width="4" height="8" style="stroke: none; fill: #f1efef;" />
  </pattern>
</svg>

here, we use a separate <svg> element, which is hidden from the page.
then we use the pattern to change the gridlines.

line.setAttribute('fill', 'url(#pattern-fill) #f1efef');

where #f1efef above is used as a fallback for older browsers that do not support the pattern.

see following working snippet...

google.charts.load('current', {
  packages: ['corechart', 'line']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Y0');
  data.addColumn('number', 'Y1');

  data.addRows([
    [0, 0, 0],    [1, 10, 5],   [2, 23, 15],  [3, 17, 9],   [4, 18, 10],  [5, 9, 5],
    [6, 11, 3],   [7, 27, 19],  [8, 33, 25],  [9, 40, 32],  [10, 32, 24], [11, 35, 27],
    [12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
    [18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
    [24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
    [30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
    [36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
    [42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
    [48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
    [54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
    [60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
    [66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
  ]);

  var options = {
    hAxis: {
      textStyle: { color: '#757575', },
      titleTextStyle: { color: '#757575',},
      minorGridlines: { color: 'transparent' },
      format : "MMM yy",
      gridlines: {color: '#f1efef',},
    },
    vAxis: {
      format: '#\'%\'',
      textStyle: { color: '#757575' },
      titleTextStyle: { color: '#757575' },
      minorGridlines: { color: 'transparent' },
      gridlines: {color: '#f1efef',},
    }
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var gridLines = chart.getContainer().getElementsByTagName('rect');
    Array.prototype.forEach.call(gridLines, function(line) {
      if (line.getAttribute('fill') === '#333333') {
        line.setAttribute('fill', 'url(#pattern-fill) #333333');
      }
    });
  });

  chart.draw(data, options);
});
rect {
  stroke-dasharray: 10 5;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
  <pattern id="pattern-fill" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(30)">
     <rect x="0" y="0" width="4" height="8" style="stroke: none; fill: #333333;" />
  </pattern>
</svg>

Upvotes: 3

Stephan Van Den Hoogen
Stephan Van Den Hoogen

Reputation: 39

You have to add a lineDashStyle to the serie.

Like the example from: https://developers.google.com/chart/interactive/docs/lines#dashed-lines

var options = {
          hAxis: { maxValue: 10 },
          vAxis: { maxValue: 18 },
          chartArea: { width: 380 },
          lineWidth: 4,
          series: {
            0: { lineDashStyle: [1, 1] },
            1: { lineDashStyle: [2, 2] },
            2: { lineDashStyle: [4, 4] },
            3: { lineDashStyle: [5, 1, 3] },
            4: { lineDashStyle: [4, 1] },
            5: { lineDashStyle: [10, 2] },
            6: { lineDashStyle: [14, 2, 7, 2] },
            7: { lineDashStyle: [14, 2, 2, 7] },
            8: { lineDashStyle: [2, 2, 20, 2, 20, 2] }
          },
          colors: ['#e2431e', '#f1ca3a', '#6f9654', '#1c91c0',
                   '#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a'],
        };

Upvotes: -1

Related Questions