Does series pointShape work for the Google scatter chart?

Question

I am using a scatter chart from the Google visualization plugin, and I am trying to:

• Have each point be a different color
• have each point be a different shape.

I see this generic recommendation here and tried this:

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Age', 'Weight'],
        [8, 12],
        [4, 5.5],
        [11, 14],
        [4, 5],
        [3, 3.5],
        [6.5, 7]
    ]);

    var options = {
        series: {
            0: { pointShape: 'circle' },
            1: { pointShape: 'triangle' },
            2: { pointShape: 'square' },
            3: { pointShape: 'diamond' },
            4: { pointShape: 'star' },
            5: { pointShape: 'polygon' }
        },
        pointSize: 28,
        chartArea:{left:10,top:0,width:"96%",height:"92%"},
        'backgroundColor': 'transparent',
        hAxis: {
            baselineColor: 'transparent',
            gridlineColor: 'transparent',
             textPosition: 'none', minValue: 0, maxValue: 15
        },
        vAxis: {
            baselineColor: 'transparent',
            gridlineColor: 'transparent',
            textPosition: 'none', minValue: 0, maxValue: 15
        },
        gridlines: {
            color: 'transparent'
        },
        legend: 'none'
    };

But it doesn't seem to work on a scatter chart.

Does scatter chart support the ability to have different colors and shapes on each point?

Answer 1

Each series is assigned to a column:

series.0 = column 1 in the data
series.1 = column 2 in the data
etc...

Since the data provided only has one Y-axis column, all of the points fall under series.0 --> pointShape: 'circle'.

Add columns and fill the rest with null to change the shape for each point. See following working snippet...

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Age', 'Weight', 'Weight', 'Weight', 'Weight', 'Weight', 'Weight'],
        [8, 12, null, null, null, null, null],
        [4, null, 5.5, null, null, null, null],
        [11, null, null, 14, null, null, null],
        [4, null, null, null, 5, null, null],
        [3, null, null, null, null, 3.5, null],
        [6.5, null, null, null, null, null, 7]
    ]);

    var options = {
        series: {
            0: { pointShape: 'circle' },
            1: { pointShape: 'triangle' },
            2: { pointShape: 'square' },
            3: { pointShape: 'diamond' },
            4: { pointShape: 'star' },
            5: { pointShape: 'polygon' }
        },
        pointSize: 28,
        chartArea:{left:10,top:0,width:"96%",height:"92%"},
        'backgroundColor': 'transparent',
        hAxis: {
            baselineColor: 'transparent',
            gridlineColor: 'transparent',
             textPosition: 'none', minValue: 0, maxValue: 15
        },
        vAxis: {
            baselineColor: 'transparent',
            gridlineColor: 'transparent',
            textPosition: 'none', minValue: 0, maxValue: 15
        },
        gridlines: {
            color: 'transparent'
        },
        legend: 'none'
    };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>