Google Charts LineChart Custom Points - angularjs

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

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 2

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.

Answer 3

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.