HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://www.gstatic.com/charts/loader.js"></script> </head> <body> <div id="point"> </div> <script> google.charts.load('current', {packages: ['corechart', 'bar']}); google.charts.setOnLoadCallback(drawAnnotations); function drawAnnotations() { var data = google.visualization.arrayToDataTable([ ['Company', 'Facebook', {type: 'string', role: 'annotation'}, 'Youtube', {type: 'string', role: 'annotation'}], ['Honda', 6505000, '6.5M', 5008000, '5M'], ['Hyundai', 6005000, '6M', 4008000, '4M'], ['Kia', 2095000, '2M', 2196000, '2.2M'], ['Jaguar', 5098100, '5.1M', 1003000, '1M'], ['Toyota', 6105000, '6.1M', 5508000, '5.5M'] ]); var options = { title: 'Car Companies - Advertising Statistics', height: 350, chartArea: { width: '50%' }, annotations: { alwaysOutside: true, textStyle: { fontSize: 12, auraColor: 'none', color: '#555' }, boxStyle: { stroke: '#ccc', strokeWidth: 1, gradient: { color1: '#f3e5f5', color2: '#f3e5f5', x1: '0%', y1: '0%', x2: '100%', y2: '100%' } } }, hAxis: { title: 'Total Amount', minValue: 0, }, vAxis: { title: 'Companies' } }; var chart = new google.visualization.BarChart(document.getElementById('point')); chart.draw(data, options); } </script> </body> </html>
OUTPUT
×

Save as Private