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 they don't already offer.

I did find this similar question with a good answer, but I don't think I can do that using angular-google-chart. Even if it is possible, I'm hoping there is a more strait forward solution.

I don't need to add a complex shape, I just need a hollow circle and an X.

I tried adding the hollow circle using stroke-color and stroke-width as a column style, but I can't even get that to work.

Here is a jsFiddle with a working hollow circle but I'm using the Javascript Literal way of adding data and can't get the following code to work:

chartData.data.cols = [
        {
            id: "someid",
            label: "Some Label",
            type: "number",
            p: {
                style: 'point {stroke-width: 4; stroke-color: #000000',
            },
        },
    ];

I'd rather add it to to options.series[0].strokeWidth but it doesn't look like that is an option.

So, if you can help with either hollow circle points or Xs that be awesome!

Answer 1

For whoever is using Dr.Molle's brilliant CSS solution and is experiencing an issue where the second data series points disappear just make the second color the default color:

#chart_div circle {
  stroke-width: 4px !important;
  fill: #ffffff !important; // note that i'm not using transparent
  stroke: #0000ff !important; // second color moved to be default
}
#chart_div circle[fill="#ff0000"] {
  stroke: #ff0000 !important;
}
#chart_div circle[fill="#0000ff"] {
  /*stroke: #0000ff !important;*/
}

**note: couldn't write this as a comment to Dr.Molle's answer due to not having enough reputation at the time.

Answer 2

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);
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart_div"></div>

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;
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart_div" ></div>

Answer 3

Dr. Molle's answer seemed to work for getting a hollow circle, although the point doesn't match the legend.

I figured out a workaround for an X shapped point. I used options.pointshape to give a star 4 sides, rotated it by 45 degrees and decreased the dent:

pointShape: { 
   type: 'star',
   sides: 4,
   dent: 0.1,
   rotation: 45,
},

Hopefully there is a better way, but Dr. Molle's and this answer work for now.