Google Scatter Charts, Different Point Size

Question

I am using Google Scatter Chart APIs to try to plot a punch card chart like the one Github has. I don't know how to change the marker size of each point shown. Is it possible in this API?

Answer 1

Yes, this is possible, though not if using the new Material Design scatter plot (created with new google.charts.Scatter()). If using the normal Scatter Plot though (created with new google.visualization.ScatterChart()), you do this by passing a style parameter for each point along with your data.

So for instance, if each point is usually defined [x, y], instead you would define it as [x, y, point_style].

An example of point_style would be 'point { size: 12; shape-type: circle; fill-color: #FFFFFF; color: #CCCCCC }';

Thus a sample data point would be [10, 5, 'point { size: 12; shape-type: circle; fill-color: #FFFFFF; color: #CCCCCC }']

Finally, you need to make sure you've added a style column to your set of data columns, like so:

var data = new google.visualization.DataTable();

data.addColumn('number', x_axis_title);
data.addColumn('number', y_axis_title);
data.addColumn( {'type': 'string', 'role': 'style'} ); // Defines point style

If you've done these things --- added a style data column and defined a style for each individual point --- then your custom styles will appear on the chart.

You can also define a pointSize and pointShape in the graph's options if you want to set them for all points at once, but you can't define individual points that way, so the above method is better if you want more granular control.