1
When creating the chart, with Annotations for the column, on account of 'Stem', even defining its color as 'Transparent', it remains there, occupying space, how to put an annotation inside the column using the style: line.
I have tried in many unsuccessful ways anyone who can help me, and I am very grateful. Abs.
Follows code below:
<div id="grafico_vendas_produtos_valor"></div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var chartDiv = document.getElementById('grafico_vendas_produtos_valor');
var data = google.visualization.arrayToDataTable([
['Data', {label: 'Produtos (Un.)', type: 'number'} , {label: 'Valor (R$)', type: 'number'} ],
['01/08/2019', 2000, 1000 ],
['02/08/2019', 2000, 1000 ],
['03/08/2019', 2000, 1000 ],
]);
var formatter = new google.visualization.NumberFormat({ pattern: ' ' });
formatter.format(data, 1);
var formatter = new google.visualization.NumberFormat({decimalSymbol: ',',groupingSymbol: '.', negativeColor: 'red', negativeParens: true, prefix: ''});
formatter.format(data, 2);
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" },
]);
var classicOptions = {
height: 400,
chartArea: { 'width': '90%', 'height': '75%', 'top': '10%' },
bar: { groupWidth: '75%' },
legend: {position: 'top'},
annotations: {
style: 'line',
textStyle: {
fontSize: 11,
},
stem:{
color: 'transparent',
}
},
tooltip: {
ignoreBounds: 'true',
},
hAxis: {
slantedText: true, slantedTextAngle: 45,
textStyle: {
fontSize: 12,
},
},
vAxis: {
textPosition: 'none',
gridlines: {
color: 'transparent'
}
},
series: {
0: { targetAxisIndex: 0, color: '#1976D2' },
1: { targetAxisIndex: 1, color: '#61C784' },
},
vAxes: {
// Adds titles to each axis.
0: {
format: ' ',
minValue: 0,
textStyle: {
fontSize: 12,
},
},
1: {
format: ' ',
minValue: 0,
textStyle: {
fontSize: 12,
},
}
}
};
function drawClassicChart() {
var classicChart = new google.visualization.ColumnChart(chartDiv);
classicChart.draw(data, classicOptions);
classicChart.draw(view, classicOptions);
}
drawClassicChart();
};
Hello Ezequiel, put the code you are trying to change, so people can help you in the best way. Welcome to the community!
– Bruno
I clarified better and added an image of the graphic I have, in the example I added lower values than in the image, thank you Bruno.
– Ezequiel Oliveira
Well, I ran your code here and I don’t quite understand what you’re getting at.
– Bruno
Stem is disrupting the position of the Annotation, Stem is set to Transparent, if it is set to black, for example, da para visualizar it, what I wanted is to place the annotation vertically and inside the column
– Ezequiel Oliveira
Have you tried setting ignoreBounds to false? See if this solves your problem.
– Bruno
I tested it, but it didn’t work
– Ezequiel Oliveira