adding stroke to google chart

Question

I have created an google area chart and give a pointSize of 5 as my screenshot below. enter image description here

Is there a way to add a stroke to my points like the image below. enter image description here

jmac · Accepted Answer

Yes, but it's tricky.

Executive Summary

Just create a script to find all the elements in the svg that's created inside the visualization div.

For all those circles, find the stroke property and set it to whatever color you want (#000000 in your example), and set the stroke-width property to whatever linewidth you want (the default for Google Visualization is 2 for line charts).

Disable Chart Interactivity so it stays that way.

Detailed Explanation

Let's start off with some simple code:

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable([
    ['Series ID', 'Value'],
    ['A', 165],
    ['B', 135],
    ['C', 157],
    ['D', 139],
    ['E', 136]
  ]);

  // Create and draw the visualization.
  var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
  ac.draw(data, {
    isStacked: true,
    width: 600,
    height: 400,
    pointSize: 10
  });
}

This looks like this:

Area Sample

Google Visualizations renders this object with the following generic code structure inside the visualization div element:

That's a lot of stuff, but in general, the way it works is:

Container div ('visualization' in this case)
2 Internal div
svg element

The svg element itself generally follows this pattern:

Clipping path for the entire svg
Group #1: Title
Group #2: Legend
Group #3: Chart Area
Group #4: Axis Labels

There are slightly different variations depending on your chart (if you don't include a label, it may not generate the 'Title' group, and in general if you change the library, the way it renders charts will be slightly different. However, for the 'corecharts' package, generally everything will follow the above).

Since you want to fiddle with the actual chart area portion (the circles in the graph), let's look in to that element a bit more closely. Here is the svg for that group.

This one shows:

Rectangle (the chart area)
Group A: Grid Lines
Group B: Area Chart (the fill)
Group C: Baseline (X Axis)
Group D: Line Chart (the line)
Group E: Circles (the points)
Group F: Sub-groups with axis labels

So we want to focus on Group E there. Here is the code for the circles:

The easiest way is just to change the "stroke" element.

For instance, if I manually change the stroke-width to 2 (the same as the line-width), and the color to black (as in your example), I get this:

Here is what it looks like:

Revised Area

But there are a few issues with this method. Any time you mouseover the chart, it redraws the SVG element (because it highlights any circle that is clicked, or all circles if the legend is clicked), and becomes something like this:

So it just redraws an even bigger circle around it, but this means your fancy formatting is all gone!

Basically, you would need to either disable interactivity, or create a script that can run even when there is that additional circle (because you don't want both circles to end up with black rings around them, as it will be super big and ugly).

So what I'd suggest is look for circles, with a radius of X (where X is whatever the majority of circles are on the page, with a tie going to the smaller number), and store all those elements in an array. Then just go through the array, changing the stroke-width and stroke-color properties whenever the chart is interacted with at all.

Realize that this will become far more complicated the more complex your chart gets, as you are doing this on the fly for all circles. If there are any other circles in the chart they will get the same treatment, or screw up the math. Which would suck.

adding stroke to google chart

Answers (2)

Executive Summary

Detailed Explanation

Related Questions