Display Single point on google material line chart - charts

Question

If I have a single data row like this:
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'User');
data.addRows([
[new Date(), 41],
]);
var options = {
chart: {
title: 'Active Users',
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
How to display a point in such kind of situation? Right now, the point is there but it is not highlighted.This problem is only in material chart not in classic.

Answer 1

the option for pointSize needs to be set for a single row of data
however, it is among the several options that do not work on Material charts
see this issue --> Tracking Issue for Material Chart Feature Parity #2143
instead, recommend using Core chart, with following option...
theme: 'material'
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'User');
data.addRows([
[new Date(), 41],
]);
var options = {
height: 500,
theme: 'material',
title: 'Active Users',
width: 900
};
if (data.getNumberOfRows() === 1) {
options.pointSize = 5;
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>