<div class="chart-container" id="bar-chart"></div>
<script>
(function() {
// Cache the container element
var containerElem = document.getElementById('bar-chart');
// Stop if it’s not there
if (!containerElem) return;
// Set a callback to run when the API is loaded
google.charts.setOnLoadCallback(drawChart);
// Config & draw chart
function drawChart() {
// Data
var data = google.visualization.arrayToDataTable([
['Month', 'Sales'],
['January', 460],
['February', 1120],
['March', 559],
['April', 540]
]);
// Options
var options = {
legend: {
position: 'none'
},
orientation: 'horizontal',
};
// Draw
var chart = new google.charts.Bar(containerElem);
chart.draw(data, options);
}
// Redraw chart on window resize
window.addEventListener('resize', function() {
drawChart();
});
})();
</script>
{{> @chart-container id="bar-chart"}}
<script>
(function () {
// Cache the container element
var containerElem = document.getElementById('bar-chart');
// Stop if it’s not there
if (!containerElem) return;
// Set a callback to run when the API is loaded
google.charts.setOnLoadCallback(drawChart);
// Config & draw chart
function drawChart() {
// Data
var data = google.visualization.arrayToDataTable([
['Month' ,'Sales'],
['January' ,460],
['February' ,1120],
['March' ,559],
['April' ,540]
]);
// Options
var options = {
legend: { position: 'none' },
orientation: 'horizontal',
};
// Draw
var chart = new google.charts.Bar(containerElem);
chart.draw(data, options);
}
// Redraw chart on window resize
window.addEventListener('resize', function() {
drawChart();
});
})();
</script>
/* No context defined. */
Please https://developers.google.com/chart/interactive/docs/gallery/barchart for usage.