0
I am trying to add a star icon to the Candlestick chart with Google Charts api, but I find it difficult. If anyone can help me:
I saw it working on this google page: https://developers.google.com/chart/interactive/docs/points
As much as I add the css and set the column type, it doesn’t work.
Below is my code, but this is the test link in jsfiddle: https://jsfiddle.net/wd4egpo1/
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['x', 'n1', 'n2', 'n3', 'n4', {label:'point', role:'style', type:'string'}],
['Mon', 20, 28, 38, 45, undefined],
['Tue', 31, 38, 55, 66, undefined],
['Wed', 50, 55, 77, 80, undefined],
['Thu', 77, 77, 66, 50, 'point { size: 18; shape-type: star; fill-color: #a52714; }'],
['Fri', 68, 66, 22, 15, undefined]
// Treat first row as data as well.
], false);
var options = {
legend:'none'
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>