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.
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>