Google ColumnChart - how to move annotation text horizontally beyond the chart area and prevent overlapping

问题

I have a column chart which looks like the following. Problem is the annotation Growth Target (41) is overlapping the bar.

I need the following. How can I accomplish this? I have reduced the chartArea width to 80% in order to create some white space to the right of it, but don't how to move the annotation there and break it in two lines.

回答1:

as for the annotation placement, there is not a great solution.
but we can add a blank row to the data table to add room for the annotation on the right.

['Oct-19', 65, '65', null, 41, null],
['Nov-19', 65, '65', '#388e3c', 41, null],
['Dec-19', 65, '65', '#388e3c', 41, null],
['', null, null, null, 41, 'Growth Target: (41)']  // <-- add blank row

however, this will only work if the chart is big enough, in overall size.

as for bringing the columns to the front,
we will need to modify the chart manually on the chart's 'ready' event.
we can add a <use> element. basically, we assign an id to each column.
then link the column to the <use> element.
this causes the column to be on top.

but it also causes issues with the annotations and tooltips.
and I haven't had time to figure out why.

see following working snippet...
(when you run the snippet, click the full page link at the top of the snippet box)

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y', {role: 'annotation', type: 'string'}, {role: 'style', type: 'string'}, 'target', {role: 'annotation', type: 'string'}],
    ['Apr-19', 28, '28', null, 41, null],
    ['May-19', 29, '29', null, 41, null],
    ['Jun-19', 22, '22', null, 41, null],
    ['Jul-19', 36, '36', null, 41, null],
    ['Aug-19', 40, '40', null, 41, null],
    ['Sep-19', 37, '37', null, 41, null],
    ['Oct-19', 65, '65', null, 41, null],
    ['Nov-19', 65, '65', '#388e3c', 41, null],
    ['Dec-19', 65, '65', '#388e3c', 41, null],
    ['', null, null, null, 41, 'Growth Target: (41)']
  ]);

  var container = document.getElementById('chart');
  var chart = new google.visualization.ComboChart(container);

  var options = {
    colors: ['#bdbdbd', '#757575'],
    hAxis: {
      title: 'MONTH'
    },
    height: 400,
    legend: 'none',
    series: {
      1: {
        annotations: {
          stem: {
            color: 'transparent'
          },
          textStyle: {
            color: '#757575'
          }
        },
        type: 'line'
      }
    },
    seriesType: 'bars',
    vAxis: {
      title: 'SALES UNITS'
    }
  };

  google.visualization.events.addListener(chart, 'ready', function () {
    // get svg namespace
    var svg = container.getElementsByTagName('svg')[0];
    var svgNS = svg.namespaceURI;
    var rects = container.getElementsByTagName('rect');
    Array.prototype.forEach.call(rects, function(rect, index) {
      if ((rect.getAttribute('fill') === '#bdbdbd') || (rect.getAttribute('fill') === '#388e3c')) {
        rect.setAttribute('id', 'rect-' + index);
        var link = document.createElementNS(svgNS, 'use');
        link.setAttribute('href', '#rect-' + index);
        svg.appendChild(link);
      }
    });
  });

  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

来源：https://stackoverflow.com/questions/58731384/google-columnchart-how-to-move-annotation-text-horizontally-beyond-the-chart-a

标签

charts

google-visualization