chartsgoogle-visualizationgoogle-loader

Display Single point on google material line chart


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.


Solution

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