To see this working, head to your live site.

How to stop the legend disappearing during a Google Charts animation?

I'm using the Google Charts API to create a column chart. I have some other parts of the page that are animated when they load (not within the Google API) and would like the Google Charts to animate too. It's pretty easy to accomplish this but the strange thing is the way the chart animates and then the legend appears once the animation has completed.

Is there any way to make the legend appear straight away so that it is visible while the charts animate?

Here a fiddle showing some charts animating and the legend appearing afterwards: http://jsfiddle.net/Qquse/1343/ passing some animation settings in the chart options...

var options = {
    animation: {
        duration: 3000,
        easing: 'out',                
        'startup': true
    }
    //etc...
};

This thread: https://groups.google.com/forum/#!topic/google-chart-api/q15ggJ0sHNc would appear to suggest that there is nothing I can do about this as it is a necessary feature of the way Google animates the charts.

Thanks!

1 comment

Answers (1)

AnswerDeveloper

Feb 14

Unfortunately, it appears that the behavior you're seeing with the Google Charts API is intentional and cannot be changed. According to the Google Charts documentation, the legend is not displayed until the chart animation is complete. There is no option to change this behavior.

However, one possible workaround is to use a custom legend outside of the chart itself, so that it is visible from the start. You could create a separate div for the legend and position it next to the chart. You would then need to manually update the legend to match the chart data.

Here's an example of how you could create a custom legend for a Google column chart:

HTML:


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

JavaScript:


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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2013',  1000,      400],
    ['2014',  1170,      460],
    ['2015',  660,       1120],
    ['2016',  1030,      540]
  ]);

  var options = {
    animation: {
        duration: 3000,
        easing: 'out',                
        'startup': true
    },
    legend: { position: 'none' } // hide the default legend
  };

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

  // create the custom legendvar legendDiv = document.getElementById('legend');
  var column1 = document.createElement('div');
  column1.className = 'legend-column';
  column1.style.backgroundColor = 'blue';
  column1.textContent = 'Sales';
  legendDiv.appendChild(column1);

  var column2 = document.createElement('div');
  column2.className = 'legend-column';
  column2.style.backgroundColor = 'red';
  column2.textContent = 'Expenses';
  legendDiv.appendChild(column2);
}

And here is the CSS to style the custom legend:


#legend {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.legend-column {
  display: flex;
  align-items: center;
  margin-right: 10px;
  padding: 5px;
  border-radius: 3px;
  font-size: 14px;
  color: white;
}

This creates a custom legend with two columns, one for each series in the chart. You can style the custom legend to match your desired appearance.