1

the docs are here. The task is to show only certain points, not all of them.

Trying:

  <Chart 
    width="100%"
    height="400px"
    chartType="AreaChart"
    legend_toggle
    data={[
      [
        'Date',
        ...Object.keys(pieChart),
        { type: 'string', role: 'style' }
      ],
      ...estimates.map(item => {
        return [ 
          item.td, 
          ...Object.keys(pieChart).map(country => item.countries.find(a => a.country == country) ? item.countries.find(a => a.country == country).value * 1 : undefined),
          versions.find(version => {
            return version.ts.substr(0, 10) == item.td
          }) ? 'point { size: 18; shape-type: star; fill-color: #a52714; }' : null
        ]
      })
    ]}
   />

Looks fine:

seems to be ok

But styles never apply, all points are hidden. Any ideas?

WhiteHat
  • 59,912
  • 7
  • 51
  • 133
Seva
  • 665
  • 1
  • 7
  • 17

1 Answers1

1

on an area chart, the points are hidden by default.

in order to display a point, or a custom point,
need to set option pointSize to a value greater than 0... 

pointSize: 4

if you only want points displayed for the series with the custom points,
set pointSize within the series option... 

series: {
  5: {
    pointSize: 4
  }
}

see following working snippet,
although not angular, works the same... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'United States', 'Germany', 'Japan', 'Italy', 'Sweden', 'Other', {role: 'style', type: 'string'}],
    ['2019-09-03', 19507, 18093, 16075, 11548, 10650, 160826, 'point { size: 18; shape-type: star; fill-color: #a52714; }'],
    ['2019-09-04', 19507, 18093, 16075, 11548, 10650, 160826, 'point { size: 18; shape-type: star; fill-color: #a52714; }']
  ]);

  var options = {
    series: {
      5: {
        pointSize: 4
      }
    }
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133