javascriptgoogle-visualizationcolumn-chart

google chart text direction


I'm trying to make Column Chart with google chart.

function drawChartEPS(response) {

var data = new google.visualization.DataTable();

data.addColumn('string', 'Period');


data.addColumn('number', 'Q1');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');


data.addColumn('number', 'Q2');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');


data.addColumn('number', 'Q3');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');


data.addColumn('number', 'Q4');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');

data.addRows(response);

var options = {
    width: '100%',
    height: '80%',
    bar: {groupWidth: "90%", width: "100%", gap: "30%"},

    chartArea:{width:"100%",height:"100%"},

    annotations: {
        highContrast: true,
        style: 'point',
        textStyle: {
            fontName: 'Sans',
            fontSize: 16,
            bold: false,
            italic: false,
            direction:-1,
            slantedText:true,
            slantedTextAngle:90,

            opacity: 1
        }
    },
    legend: {
       position: 'none'
    }
};

var chart = new google.visualization.ColumnChart(
    document.getElementById('EPSChart'));

chart.draw(data, options);
}

And get the result google chart

But I need that my chart looks like in this picture examle Can not Change the direction of text on the graphs and add arrows


Solution

  • there are no standard config options to change the rotation of the annotations,
    but you can change them manually, on the chart's 'ready' event.

    however, you will need to use a MutationObserver,
    as the chart will rotate them back on any activity,
    such as "on hover".

    to rotate, add a transform attribute to each <text> element in the svg.
    in the transform attribute, use --> rotate(z x y), where...
    z = the angle of the rotation
    x = the x coordinate of the element
    y = the y coordinate of the element

    x & y will already be attributes in the element,
    so only need the rotation value, such as --> -90

    transform="rotate(-90 100 300)"
    

    see following working snippet...

    google.charts.load('current', {
      packages: ['corechart']
    }).then(function () {
    
      var data = new google.visualization.DataTable();
    
      data.addColumn('string', 'Period');
    
    
      data.addColumn('number', 'Q1');
      data.addColumn({type: 'string', role: 'style'});
      data.addColumn({type:'string', role: 'annotation'}, '');
    
    
      data.addColumn('number', 'Q2');
      data.addColumn({type: 'string', role: 'style'});
      data.addColumn({type:'string', role: 'annotation'}, '');
    
    
      data.addColumn('number', 'Q3');
      data.addColumn({type: 'string', role: 'style'});
      data.addColumn({type:'string', role: 'annotation'}, '');
    
    
      data.addColumn('number', 'Q4');
      data.addColumn({type: 'string', role: 'style'});
      data.addColumn({type:'string', role: 'annotation'}, '');
    
      data.addRows([['DEC', 500, 'cyan', '500', 600, 'magenta', '600', 650, 'yellow', '650', 700, 'lime', '700']]);
    
      var options = {
          width: '100%',
          height: '80%',
          bar: {groupWidth: "90%", width: "100%", gap: "30%"},
    
          chartArea:{width:"100%",height:"100%"},
    
          annotations: {
              highContrast: true,
              style: 'point',
              textStyle: {
                  fontName: 'Sans',
                  fontSize: 16,
                  bold: false,
                  italic: false,
                  direction:-1,
                  slantedText:true,
                  slantedTextAngle:90,
    
                  opacity: 1
              }
          },
          legend: {
             position: 'none'
          }
      };
    
      var container = document.getElementById('EPSChart')
      var chart = new google.visualization.ColumnChart(container);
    
      google.visualization.events.addListener(chart, 'ready', function () {
        var observer = new MutationObserver(function () {
          var labels = container.getElementsByTagName('text');
          Array.prototype.forEach.call(labels, function(label) {
            if (label.getAttribute('text-anchor') === 'middle') {
              label.setAttribute('transform', 'rotate(-90, ' + label.getAttribute('x') + ' ' + label.getAttribute('y') + ')');
            }
          });
        });
        observer.observe(container, {
          childList: true,
          subtree: true
        });
      });
    
      chart.draw(data, options);
    
    });
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="EPSChart"></div>