How to prevent legend from getting cutoff GOOGLE CHARTS

user_7346980 0
Viewed 1382

google.charts.load('current', {'packages': ['line']});
google.charts.setOnLoadCallback(drawCurveTypes);


function drawCurveTypes() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'values');
      data.addColumn('number', 'a');
      data.addColumn('number', 'b');
      data.addColumn('number', 'c');
      data.addColumn('number', 'd');
   data.addColumn('number', 'e');
      data.addColumn('number', 'f');
      data.addColumn('number', 'g');
      data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);

    var options = {
        chart: {
          title: "Example"
          }
     };
      var line=document.getElementById('chart_div');
      var chart = new google.charts.Line(line);
      chart.draw(data,google.charts.Line.convertOptions(options));
    }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

Here is the chart I have. It is a material line chart (package: google.charts.Line not google.visualization.LineChart). As you see "SPPlus" is cutoff. I have tried to adjust the height of the chart but that has not solved my issue. enter image description here

google-visualization charts javascript
2 Answers

you can increase the height of the chart.
the reason this may not have worked in the provided snippet,
the options were being used in the wrong place.

in the snippet, the options are added to the chart's constructor.
as such, none of the provided options are being used, including the title. 

var chart = new google.charts.Line(line,google.charts.Line.convertOptions(options));
chart.draw(data);

instead, they should be added to the draw method. 

var chart = new google.charts.Line(line);
chart.draw(data, google.charts.Line.convertOptions(options));

you could also decrease the font size.
see following working snippet... 

google.charts.load('current', {'packages': ['line']});
google.charts.setOnLoadCallback(drawCurveTypes);

function drawCurveTypes() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'values');
  data.addColumn('number', 'a');
  data.addColumn('number', 'b');
  data.addColumn('number', 'c');
  data.addColumn('number', 'd');
  data.addColumn('number', 'e');
  data.addColumn('number', 'f');
  data.addColumn('number', 'g');
  data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);

  var options = {
    chart: {
      title: 'Example'
    },
    height: 400,
    legend: {
      textStyle: {
        fontSize: 10
      }
    }
  };
  var line = document.getElementById('chart_div');
  var chart = new google.charts.Line(line);
  chart.draw(data, google.charts.Line.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

another option would be to draw your own custom legend,
on top of the chart, this would allow for more room,
without increasing the height.
see following working snippet... 

google.charts.load('current', {'packages': ['line']});
google.charts.setOnLoadCallback(drawCurveTypes);

function drawCurveTypes() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'values');
  data.addColumn('number', 'a');
  data.addColumn('number', 'b');
  data.addColumn('number', 'c');
  data.addColumn('number', 'd');
  data.addColumn('number', 'e');
  data.addColumn('number', 'f');
  data.addColumn('number', 'g');
  data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);

  var options = {
    chart: {
      title: 'Example'
    },
    legend: {
      position: 'none'
    }
  };
  var line = document.getElementById('chart_div');
  var chart = new google.charts.Line(line);

  // add legend marker
  function addLegendMarker(markerProps) {
    var legendMarker = document.getElementById('template-legend-marker').innerHTML;
    for (var handle in markerProps) {
      if (markerProps.hasOwnProperty(handle)) {
        legendMarker = legendMarker.replace('{{' + handle + '}}', markerProps[handle]);
      }
    }
    document.getElementById('legend_div').insertAdjacentHTML('beforeEnd', legendMarker);
  }

  // chart ready event
  google.visualization.events.addListener(chart, 'ready', function () {
    var legend = document.getElementById('legend_div');

    // get colors from chart
    var colorPallette = [];
    var lines = line.getElementsByTagName('path');
    Array.prototype.forEach.call(lines, function(path) {
      if (colorPallette.indexOf(path.getAttribute('stroke')) === -1) {
        colorPallette.push(path.getAttribute('stroke'));
      }
    });

    // clear previous legend
    legend.innerHTML = '';

    // add legend marker for each Y axis column - skip X axis --> i = 1
    for (var i = 1; i < data.getNumberOfColumns(); i++) {
      var markerProps = {};
      markerProps.index = i;
      markerProps.color = colorPallette[i - 1];
      markerProps.label = data.getColumnLabel(i);
      addLegendMarker(markerProps);
    }

    // add "hover" event to each legend marker
    var currentSelection;
    var markers = legend.getElementsByTagName('DIV');
    Array.prototype.forEach.call(markers, function(marker) {
      marker.addEventListener('mouseover', function (e) {
        currentSelection = chart.getSelection();
        var marker = e.target || e.srcElement;
        marker = marker.closest('.legend-marker');
        var columnIndex = parseInt(marker.getAttribute('data-columnIndex'));
        chart.setSelection([{column: columnIndex}]);
      }, false);
      marker.addEventListener('mouseout', function (e) {
        chart.setSelection([]);
      }, false);
    });
  });

  chart.draw(data, google.charts.Line.convertOptions(options));
}
#legend_div {
  color: #999;
  font-family: Roboto;
  position: absolute;
  right: 0px;
  text-align: right;
  top: 0px;
  width: 60%;
  z-index: 1000;
}

.legend-marker {
  display: inline-block;
  padding: 6px 6px 6px 6px;
}

.legend-marker-color {
  border-radius: 25%;
  display: inline-block;
  height: 12px;
  width: 12px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div"></div>
<div id="legend_div"></div>

<!-- template for building marker -->
<script id="template-legend-marker" type="text/html">
  <div class="legend-marker" data-columnIndex="{{index}}">
    <div class="legend-marker-color" style="background-color: {{color}}"></div>
    <span>{{label}}</span>
  </div>
</script>

user_50907710

I have created an charts with 12 columns and it's not breaking and instead it shown an toggle button to move to next columns.

I think you have mess up with the configuration itself.

HTML

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

JS

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCurveTypes);
function parseData(input){
 return input.reduce(function(o,i){
    o.push(i.concat(i).concat(i).concat(i).concat(i));
    return o;
 },[]);
}

function drawCurveTypes() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'a');
      data.addColumn('number', 'b');
      data.addColumn('number', 'c');
      data.addColumn('number', 'd');
      data.addColumn('number', 'e');
      data.addColumn('number', 'f');
      data.addColumn('number', 'g');
      data.addColumn('number', 'h');
      data.addColumn('number', 'i');
      data.addColumn('number', 'j');
      data.addColumn('number', 'j');
      data.addColumn('number', 'k');
      data.addColumn('number', 'l');
      data.addColumn('number', 'm');

      data.addRows(parseData([
        [0, 0, 0],    [1, 10, 5],   [2, 23, 15],  [3, 17, 9],   [4, 18, 10],  [5, 9, 5],
        [6, 11, 3],   [7, 27, 19],  [8, 33, 25],  [9, 40, 32],  [10, 32, 24], [11, 35, 27],
        [12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
        [18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
        [24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
        [30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
        [36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
        [42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
        [48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
        [54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
        [60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
        [66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
      ]));

      var options = {
        height: 500,
        hAxis: {
          title: 'Time'
        },
        vAxis: {
          title: 'Popularity'
        },
        series: {
          1: {curveType: 'function'}
        }
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

JSFiddle demo - https://jsfiddle.net/z0wudpxv/1/

user_53205350
Related