CODEWITHSUNDEEP
javascriptgoogle-visualization
Matt
Matt

Reputation: 7212

Google Charts - Dynamically rotate line points

It's possible to rotate line chart points using Google Charts (https://developers.google.com/chart/interactive/docs/points#rotations). It's also possible to customize individual points (https://developers.google.com/chart/interactive/docs/points#individual).

I want to rotate points based upon the data passed to the table. The following code loads the custom point but does not rotate the triangle. Is this even possible?

google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable
        ([['X', 'Y', {'type': 'string', 'role': 'style'}],
          [1, 3, null],
          [2, 2.5, null],
          [6, 3, 'point {shape-type: triangle;  rotation: 180;}'],
          [7, 2.5, null],
          [8, 3, null]
    ]);

    var options = {
      legend: 'none',
      hAxis: { minValue: 0, maxValue: 9 },
      curveType: 'function',
      pointSize: 7
    };

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

In jsfiddle - https://jsfiddle.net/7bc691kr/

Thanks

Upvotes: 0

Views: 277

Answers (1)

Alexander Lindsay
Alexander Lindsay

Reputation: 416

In the individual points options it looks like the rotation option is called shape-rotation instead of just rotation.

Change your rotation: 180 to shape-rotation: 180 and it should work.

Upvotes: 2

Related Questions