I'm using google visualization
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'time');
data2.addColumn('number', 'amount');
data2.addColumn({ type: 'string', role: 'tooltip' });
data2.addRows(rows_data);
var options2 = {
vAxis: { textPosition: 'none', title: '', textStyle: { fontName: 'arial'} },
hAxis: { slantedText: false, textStyle: { color: '#E6EFFA' }, gridlines: { color: '#E6EFFA', count: 20} },
backgroundColor: '#E6EFFA',
legend: 'none',
chartArea: { top: 0 },
colors: ['#435988'],
chartArea: { width: 800 }
};
chart2 = new google.visualization.LineChart(document.getElementById('chart_div_volume'));
I want the vAxis position to be on the right.
is it possible ?
Short Answer: Yes, but it's tricky.
Long Answer:
You need to set up a multi-axis chart. Basically, you create a dummy axis with no labels or anything to make it look like an axis. Then you configure a secondary axis. You create one set of dummy values (hidden) to put on the first axis, and plot your real data on the second.
Here is an example:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Dummy', 'Sales', 'Expenses'],
['2004', 0, 1000, 400],
['2005', null, 1170, 460],
['2006', null, 660, 1120],
['2007', null, 1030, 540]
]);
var options = {
title: 'Company Performance',
series: { 0: {targetAxisIndex: 0, visibleInLegend: false, pointSize: 0, lineWidth: 0},
1: {targetAxisIndex: 1},
2: {targetAxisIndex: 1}
},
vAxes: {
0: {textPosition: 'none'},
1: {},
}
};
var chart = new google.visualization.LineChart(document.getElementById('visualization'));
chart.draw(data, options);
}
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Productivity');
data.addColumn('number', 'Composite');
data.addColumn({ type: 'number', role: 'annotation' });
data.addColumn('number', 'Average(N=5)');
var compositeDataArry = [];
compositeDataArry.push(["Ravi", 11, 11, 5]);
compositeDataArry.push(["Wasif", 5, 5, 5]);
compositeDataArry.push(["Vipin", 2, 2, 5]);
compositeDataArry.push(["Ankur", 3, 3, 5]);
compositeDataArry.push(["Pankaj", 1, 1, 5]);
compositeDataArry.push(["Dheeraj", 4, 4, 5]);
data.addRows(compositeDataArry);
var options = {
title: 'My Chart',
titleTextStyle: { color: '#264158', fontSize: 24 },
seriesType: 'bars',
annotations: {
alwaysOutside: true,
textStyle: {
color: '#000000',
fontSize: 15
}
},
hAxis: {
slantedText: true,
slantedTextAngle: -45
},
series: {
0: { targetAxisIndex: 0, },
1: { targetAxisIndex: 1, type: 'line' }
},
vAxes: {
0: { textPosition: 'none' },
1: {}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart_div" style="height: 500px; width: 100%"></div>
</body>
</html>
Related
I'm currently using chart.js with Vue 2 and I'm facing a problem when using border-radius with stacked bars.
I want to have a border-top radius but when doing that I get a "gap" between the border that was created and the bar above.
Is there any option that can fill that empty space?
Current behaviour
Expected behaviour
These are the current options I'm using for the graph.
options: {
responsive: true,
lineTension: 1,
plugins: {
legend: {
position: 'bottom',
// prevent filtering using labels
'onClick' : function (evt, item, legend) {
return;
},
labels: {
usePointStyle: 'circle',
},
}
},
elements: {
bar: {
borderRadius: {
topLeft: 4.6,
topRight: 4.6,
},
}
},
scales: {
y: {
stacked: true,
ticks: {
maxTicksLimit: 6,
callback: function(value, index, ticks) {
return value + ' min';
}
},
},
x: {
stacked: true,
grid: {
color: "rgba(0, 0, 0, 0)",
}
}
}
}
What you need it is not configurable by any options.
Nevertheless you can use a plugin to change the base of the bar to draw, taking care of the border radius.
EDIT: I have found a specific option in bar element, base, which should address the use case.
See snippet:
const ctx = document.getElementById("myChart");
// not used but leave it
const plugin = {
id: 'fillGaps',
beforeDatasetDraw(chart, args) {
if (args.index > 0) {
args.meta.data.forEach(function(item){
const pre = item.base;
item.base += 12;
});
}
},
};
//
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'user 1 online',
data: [50, 35, 45, 47, 10, 3, 27],
backgroundColor: 'rgba(40, 139, 170, 1)',
borderWidth: 0,
borderSkipped: 'start',
base: 0
},
{
label: 'user 2 online',
data: [50, 35, 45, 47, 10, 3, 27],
backgroundColor: 'orange',
borderWidth: 0,
borderSkipped: 'start',
base: 0
}]
},
options: {
elements: {
bar: {
borderRadius: {
topLeft: 12,
topRight: 12,
bottomLeft: 12,
bottomRight: 12
},
}
},
scales: {
y: {
stacked: true,
},
x: {
stacked: true,
}
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>
In bar charts, label above bars overlaps tooltip. Please see screenshots below.
Bar chart - original
Bar chart - tooltip problem
Please see my code below.
<!doctype html>
<html>
<head>
<title>Single Bar Chart</title>
<script src="Chart.min.js"></script>
<style>
canvas {
border:1px solid #367ee9;
}
#container{
width: 950px;
}
</style>
</head>
<body>
<div id="container">
<canvas id="canvas"></canvas>
</div>
<script>
var barChartData = {
labels: ["Jul 19", "Aug 19", "Sep 19", "Oct 19", "Nov 19", "Dec 19", "Jan 20", "Feb 20", "Mar 20", "Apr 20", "May 20", "Jun 20"],
datasets: [{
//label: 'Jan 20',
backgroundColor: '#367ee9',
borderColor: '#367ee9',
borderWidth: 1,
data: [33111, 27510, 27377, 14947, 4312, 7279, 70988, 2903, 29575, 65, 9861, 3416],
data_action: ["bar1_action", "bar2_action", "bar3_action", "bar4_action", "bar5_action", "bar6_action", "bar7_action", "bar8_action", "bar9_action", "bar10_action", "bar11_action", "bar12_action"],
data_alt: ["Click here to see results of bar1_alt", "bar2_alt", "bar3_alt", "bar4_alt", "bar5_alt", "bar6_alt", "bar7_alt", "bar8_alt", "bar9_alt", "bar10_alt", "bar11_alt", "bar12_alt"],
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
onHover: (event, chartElement) => {
event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
},
hover: {
animationDuration: 0,
},
animation: {
duration: 1000,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
//ctx.canvas.style.zIndex = 5;
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var val = dataset.data[index];
var data = "$" + val.toLocaleString();
if(val > -1){
ctx.fillText(data, bar._model.x, bar._model.y - 5);
}
else{
ctx.fillText(data, bar._model.x, bar._model.y + 14);
}
});
});
}
},
onClick:function(evt) {
var firstPoint = this.getElementAtEvent(evt)[0];
if (firstPoint) {
var value = this.data.datasets[firstPoint._datasetIndex].data_action[firstPoint._index];
alert(value);
}
},
legend: {
display: false,
position: 'top',
onHover:function(){
event.target.style.cursor = 'pointer';
},
},
title: {
display: true,
text: 'Total Benefits Exceeded ($231,345) (Claim Date)',
fontColor: '#000',
fontSize: '15',
},
tooltips: {
yAlign:'top',
displayColors: false, // hide color box
yPadding: 10,
xPadding: 10,
backgroundColor: '#fff',
borderColor: '#000',
borderWidth: 1,
bodyFontFamily: 'tahoma,Verdana,Arial, Helvetica, sans-serif',
bodyFontSize: 13,
bodyFontColor:'#000',
callbacks: {
title: function(tooltipItem, data) {
return; // hide title
},
label: function(tooltipItem, data) {
barCount = tooltipItem.index;
barIndex = tooltipItem.datasetIndex;
var label = data.datasets[barIndex].data_alt[barCount];
return label;
},
}
},
scales: {
yAxes: [{
display: false,
scaleLabel: {
display: true,
labelString: 'Denied Charges ($)',
fontColor: '#000',
fontSize: '15',
fontStyle: 'bold',
},
ticks: {
callback: function(value, index, values) {
return '$' + value.toLocaleString();
}
},
}]
}
}
});
};
</script>
</body>
</html>
Is there any way to avoid this?
I tried to find details about setting z-index in above code. But, I haven't got much help.
Other than this, the graphs work great.
Thanks,
Sandeep
At the begin of the animation.onComplete callback function, you should add the following lines:
ctx.save();
ctx.globalCompositeOperation='destination-over';
And at the end of animation.onComplete, you need to invoke ctx.restore().
For further details about ctx.globalCompositeOperation='destination-over', have a look at this answer.
Please take a look at your amended code and see how it works.
var barChartData = {
labels: ["Jul 19", "Aug 19", "Sep 19", "Oct 19", "Nov 19", "Dec 19", "Jan 20", "Feb 20", "Mar 20", "Apr 20", "May 20", "Jun 20"],
datasets: [{
//label: 'Jan 20',
backgroundColor: '#367ee9',
borderColor: '#367ee9',
borderWidth: 1,
data: [33111, 27510, 27377, 14947, 4312, 7279, 70988, 2903, 29575, 65, 9861, 3416],
data_action: ["bar1_action", "bar2_action", "bar3_action", "bar4_action", "bar5_action", "bar6_action", "bar7_action", "bar8_action", "bar9_action", "bar10_action", "bar11_action", "bar12_action"],
data_alt: ["Click here to see results of bar1_alt", "bar2_alt", "bar3_alt", "bar4_alt", "bar5_alt", "bar6_alt", "bar7_alt", "bar8_alt", "bar9_alt", "bar10_alt", "bar11_alt", "bar12_alt"],
}]
};
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
onHover: (event, chartElement) => {
event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
},
hover: {
animationDuration: 0,
},
animation: {
duration: 1000,
onComplete: function() {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.save();
ctx.globalCompositeOperation='destination-over';
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
//ctx.canvas.style.zIndex = 5;
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var val = dataset.data[index];
var data = "$" + val.toLocaleString();
if (val > -1) {
ctx.fillText(data, bar._model.x, bar._model.y - 5);
} else {
ctx.fillText(data, bar._model.x, bar._model.y + 14);
}
});
});
ctx.restore();
}
},
onClick: function(evt) {
var firstPoint = this.getElementAtEvent(evt)[0];
if (firstPoint) {
var value = this.data.datasets[firstPoint._datasetIndex].data_action[firstPoint._index];
alert(value);
}
},
legend: {
display: false,
position: 'top',
onHover: function() {
event.target.style.cursor = 'pointer';
},
},
title: {
display: true,
text: 'Total Benefits Exceeded ($231,345) (Claim Date)',
fontColor: '#000',
fontSize: '15',
},
tooltips: {
yAlign: 'top',
displayColors: false, // hide color box
yPadding: 10,
xPadding: 10,
backgroundColor: '#fff',
borderColor: '#000',
borderWidth: 1,
bodyFontFamily: 'tahoma,Verdana,Arial, Helvetica, sans-serif',
bodyFontSize: 13,
bodyFontColor: '#000',
callbacks: {
title: function(tooltipItem, data) {
return; // hide title
},
label: function(tooltipItem, data) {
barCount = tooltipItem.index;
barIndex = tooltipItem.datasetIndex;
var label = data.datasets[barIndex].data_alt[barCount];
return label;
},
}
},
scales: {
yAxes: [{
display: false,
scaleLabel: {
display: true,
labelString: 'Denied Charges ($)',
fontColor: '#000',
fontSize: '15',
fontStyle: 'bold',
},
ticks: {
callback: function(value, index, values) {
return '$' + value.toLocaleString();
}
},
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div id="container">
<canvas id="canvas"></canvas>
</div>
The below code to generate google line chart works fine with 2 values (Date and Mean) assigned. When I added more data (including Mode and Variance as shown below), it just shows the original datas (Date and Mean). The other data are not displayed. What am I doing wrong here? please. I am still learning google charts. Any help would be appreciated greatly. thanks.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydb";
$con = new mysqli($servername, $username, $password, $dbname);
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
else
{
);
}
$query = "SELECT Date, Mean, Mode, Variance FROM datatb";
$aresult = $con->query($query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Multiple Data</title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Date','Mean','Mode','Variance'],
<?php
while($row = mysqli_fetch_assoc($aresult)){
echo "['".$row["Date"]."', ".$row["Mean"].", ".$row["Mode"].", ".$row["Variance"]."],";
}
?>
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var options = {
title: 'Data',
hAxis : {textStyle : {fontSize: 8}},
'tooltip' : { trigger: 'none'},
enableInteractivity: false,
width: '100%',
height: '700',
chartArea:{
left:10,
top: 100,
width: '100%',
height: '450',
},
pointSize:4,
vAxis: { textPosition: 'none', gridlines: { count: 10 }, baselineColor: 'gray' },
annotations: { stemColor: 'white', textStyle: { fontSize: 11 } },
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curvechart'));
chart.draw(data, options);
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="curvechart" style="width: 2500px; height: 600px"></div>
</body>
</html>
Whitehat's suggestion:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydb";
$con = new mysqli($servername, $username, $password, $dbname);
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
else
{
);
}
$query = "SELECT Date, Mean, Mode, Variance FROM datatb";
$aresult = $con->query($query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Multiple Data</title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable();
data.addColumn('number', 'Mode');
data.addColumn('number', 'Variance');
var data = google.visualization.arrayToDataTable([
['Date','Mean','Mode','Variance'],
<?php
while($row = mysqli_fetch_assoc($aresult)){
echo "['".$row["Date"]."', ".$row["Mean"].", ".$row["Mode"].", ".$row["Variance"]."],";
}
?>
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}, 2, {
calc: 'stringify',
sourceColumn: 2,
type: 'string',
role: 'annotation'
}, 3, {
calc: 'stringify',
sourceColumn: 3,
type: 'string',
role: 'annotation'
}, ]);
var options = {
title: 'Data',
hAxis : {textStyle : {fontSize: 8}},
'tooltip' : { trigger: 'none'},
enableInteractivity: false,
width: '100%',
height: '700',
chartArea:{
left:10,
top: 100,
width: '100%',
height: '450',
},
pointSize:4,
vAxis: { textPosition: 'none', gridlines: { count: 10 }, baselineColor: 'gray' },
annotations: { stemColor: 'white', textStyle: { fontSize: 11 } },
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curvechart'));
chart.draw(data, options);
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="curvechart" style="width: 2500px; height: 600px"></div>
</body>
</html>
after correcting the echo statement, just need to add column to the view...
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}, 2, 3]);
or if you want all to have annotations...
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}, 2, {
calc: 'stringify',
sourceColumn: 2,
type: 'string',
role: 'annotation'
}, 3, {
calc: 'stringify',
sourceColumn: 3,
type: 'string',
role: 'annotation'
}, ]);
I have a big CSV file with 20 columns.
In a single statement, I would like to be able to make chart one take values from column 1 to 10 and chart two to take the values from columns 11 to 20.
This way, I am only reading the CSV once, which should speed up load times.
Currently, I have the below code, which reads the same columns for both charts.
Can anyone advise me how to do this?
Thanks
function FwThroughputStacked(){
$.get("../CRX1/Overall_DAB_Fortinet_Throughput_Report.csv", function(csvString) {
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
var data = new google.visualization.arrayToDataTable(arrayData);
var view = new google.visualization.DataView(data);
view.setColumns([0,1,2,3,4,5,6,7,8,9,10]);
var options = {
chartArea: {width: '80%', height: '75%'},
explorer: {actions: ["dragToZoom", "rightClickToReset"]},
isStacked: true,
hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max, textStyle: {fontSize: 9}},
vAxis: {title: "Megabits/s", minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max, textStyle: {fontSize: 10}},
legend: {position: 'top', maxLines: 10, textStyle: {fontSize: 9} },
};
var options2 = {
chartArea: {width: '80%', height: '75%'},
explorer: {actions: ["dragToZoom", "rightClickToReset"]},
hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max, textStyle: {fontSize: 9}},
vAxis: {title: "Megabits/s", minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max, textStyle: {fontSize: 10}},
legend: {position: 'top', maxLines: 10, textStyle: {fontSize: 9} },
};
var chart = new google.visualization.AreaChart(document.getElementById('throughputStacked'));
chart.draw(view, options);
var chart = new google.visualization.LineChart(document.getElementById('throughput'));
chart.draw(view, options2);
});
}
sounds like you need separate views for each chart, similar to options
in the following snippet,
view is created for chart
-- and --
view2 is created for chart2
google.charts.load('current', {
callback: function () {
$.get("output.txt", function(csvString) {
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
var data = new google.visualization.arrayToDataTable(arrayData);
var view = new google.visualization.DataView(data);
view.setColumns([0,1,2,3,4,5,6,7,8,9,10]);
var view2 = new google.visualization.DataView(data);
view2.setColumns([11,12,13,14,15,16,17,18,19]);
var options = {
chartArea: {width: '80%', height: '75%'},
explorer: {actions: ["dragToZoom", "rightClickToReset"]},
isStacked: true,
hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max, textStyle: {fontSize: 9}},
vAxis: {title: "Megabits/s", minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max, textStyle: {fontSize: 10}},
legend: {position: 'top', maxLines: 10, textStyle: {fontSize: 9} },
};
var options2 = {
chartArea: {width: '80%', height: '75%'},
explorer: {actions: ["dragToZoom", "rightClickToReset"]},
hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max, textStyle: {fontSize: 9}},
vAxis: {title: "Megabits/s", minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max, textStyle: {fontSize: 10}},
legend: {position: 'top', maxLines: 10, textStyle: {fontSize: 9} },
};
var chart = new google.visualization.AreaChart(document.getElementById('throughputStacked'));
chart.draw(view, options);
var chart2 = new google.visualization.LineChart(document.getElementById('throughput'));
chart2.draw(view2, options2);
});
},
packages: ['corechart']
});
I want the annotations above columns to always BE ABOVE columns. I set annotations.alwaysOutside to true, but whenever a column reaches the roof of the chart, it will position the annotation within the column. If you run the code on JSFiddle you'll see what I mean.
So, how can I force annotations to ALWAYS display above columns?
https://jsfiddle.net/y7ootfoo/
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<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([
["Mana Cost", "Cards"],
["0", 1],
["1", 2],
["2", 3],
["3", 4],
["4", 4],
["5", 3],
["6", 2],
["7+", 1],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation",
}, ]);
var options = {
title: "Cards/Mana Cost",
width: '750',
height: '375',
backgroundColor: "#FFF",
enableInteractivity: false,
bar: {
groupWidth: "90%"
},
legend: {
position: "none"
},
annotations: {
alwaysOutside: true,
stem: {
color: "transparent"
},
textStyle: {
fontName: 'Lato',
fontSize: 18.75,
bold: true,
italic: false,
auraColor: 'transparent',
color: "#000"
}
},
chartArea: {
backgroundColor: "#FFF"
},
titleTextStyle: {
color: "#000",
fontName: "Lato",
fontSize: 25,
bold: true,
italic: false
},
vAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none"
},
hAxis: {
textStyle: {
color: "#000",
fontName: "Lato",
fontSize: 18.75,
bold: true,
italic: false
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
</script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>
set
var options = {
vAxis: {
viewWindow:{
max: maxV, //maximum value of annotations + 1
},
}}
I also add
chartArea: {
width: '95%',
}
https://jsfiddle.net/damiantt/y7ootfoo/1/
complete code:
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<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([
["Mana Cost", "Cards"],
["0", 1],
["1", 2],
["2", 3],
["3", 4],
["4", 4],
["5", 3],
["6", 2],
["7+", 1],
]);
var maxV = 0;
for (var i = 0; i < data.getNumberOfRows(); i++) {
if(data.getValue(i, 1) > maxV) {
maxV = data.getValue(i, 1);
}
}
maxV++;
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation",
}, ]);
var options = {
title: "Cards/Mana Cost",
width: '750',
height: '375',
backgroundColor: "#FFF",
enableInteractivity: false,
bar: {
groupWidth: "90%"
},
legend: {
position: "none"
},
annotations: {
alwaysOutside: true,
stem: {
color: "transparent"
},
textStyle: {
fontName: 'Lato',
fontSize: 18.75,
bold: true,
italic: false,
auraColor: 'transparent',
color: "#000"
}
},
chartArea: {
width: '95%',
backgroundColor: "#FFF"
},
titleTextStyle: {
color: "#000",
fontName: "Lato",
fontSize: 25,
bold: true,
italic: false
},
vAxis: {
viewWindow:{
max:maxV,
},
gridlines: {
color: 'transparent'
},
textPosition: "none"
},
hAxis: {
textStyle: {
color: "#000",
fontName: "Lato",
fontSize: 18.75,
bold: true,
italic: false
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
</script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>