Google Charts Annotation outside the column

Asked

Viewed 212 times

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();
};

follows the graphic image: inserir a descrição da imagem aqui

  • Hello Ezequiel, put the code you are trying to change, so people can help you in the best way. Welcome to the community!

  • 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.

  • Well, I ran your code here and I don’t quite understand what you’re getting at.

  • 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

  • Have you tried setting ignoreBounds to false? See if this solves your problem.

  • I tested it, but it didn’t work

Show 1 more comment
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.