Google Charts LineChart Custom Points

Question

Is it possible to add a custom point shape to a line chart?

Google\'s Customizing Points Documentation doesn\'t mention anything about adding shapes the

Answer 1

Basically: when you want to apply a custom style you must use a style-column, the style will be set via the value of the column.

Example using the object-literal:

google.setOnLoadCallback(drawChart);

function drawChart() {
  var chartData = {

    data: {

      cols: [{

          label: "X",
          type: "number"
        }, {
          label: 'Y',
          type: "number"
        }, {
          role: 'style',
          type: "string"
        }

      ],
      rows: [{
        c: [{
          v: 1
        }, {
          v: 5
        }, {
          v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}'
        }]
      }, {
        c: [{
          v: 2
        }, {
          v: 1
        }, {
          v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}'
        }]
      }, {
        c: [{
          v: 3
        }, {
          v: 3
        }, {
          v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}'
        }]
      }]
    }
  };
  
  var options = {
    legend: 'none',
    curveType: 'function',
    pointSize: 7

  };

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

If you're using multiple vaxes then add the column with role: 'style' immediately after the column you want to style.

Another solution:

set the style of the circles via CSS:

google.setOnLoadCallback(drawChart);

function drawChart() {
  var chartData = {

    data: {

      cols: [{

          label: "X",
          type: "number"
        }, {
          label: 'Y',
          type: "number"
        }, {
          label: 'Y',
          type: "number"
        }

      ],
      rows: [
             {c:[{v:1}, {v:5}, {v:4}]},
             {c:[{v:2}, {v:1}, {v:2}]},
             {c:[{v:3}, {v:3}, {v:5}]}
            ]
    }
  };


  var options = {
    curveType: 'function',
    pointSize: 7,
    series: {
      //set unique colors for the series when you must set
      //different points for mmultiple series
      0: {
        color: 'ff0000'
      },
      1: {
        color: '#0000ff'
      }
    }

  };

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

#chart_div circle {
  stroke-width: 4px !important;
  fill: none !important;
}
#chart_div circle[fill="#ff0000"] {
  stroke: #ff0000 !important;
}
#chart_div circle[fill="#0000ff"] {
  stroke: #0000ff !important;
}