Point Customization Example

An example of a point customization.

by fkhairzad

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 900px; height: 200px;"></div>

JavaScript

google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable
            ([['X', 'Y', {'type': 'string', 'role': 'style'}],
              [0.45, 1, 'point { size: 24; shape-type: diamond; fill-color: transparent; stroke-color: blue; stroke-width: 2; }'],
              [0.65, 1, 'point { size: 24; shape-type: diamond; fill-color: transparent; stroke-color: blue; stroke-width: 2; }'],
              [0.8, 1, 'point { size: 24; shape-type: star; fill-color: red; stroke-color: #a52714; stroke-width: 2; }'],
        ]);

        var options = {
        	height: '100px',
          legend: 'none',
          hAxis: {baselineColor: '#fff', minValue: 0, maxValue: 1, gridlines: { color: '#fff' }, },
          vAxis: { baselineColor: '#fff',minValue: 0, maxValue: 2, gridlines: { color: '#fff', count: 0 }, },
          series: {
          	'0': { color: 'transparent' },
          },
          pointSize: 20,
          dataOpacity: 0.2
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }