Google Charts
Google Charts Introduction Getting Started Area Charts Bar Charts Bubble Charts Calendar Charts Candlestick Charts Column Charts Combination Chart Gauge Chart Geo Charts Histogram Charts Line Charts Maps Organization Chart Pie Charts Sankey Charts Scatter Charts Stepped Area Charts Table Chart Trendline Charts Wordtree Charts

Google Line Chart

Line charts are used to draw line based charts.

A line chart is rendered within the browser using SVG or VML.

Like all Google charts, line charts display tooltips when the user hovers over the data.


Basic Line Chart

The following example shows how to draw a basic line chart, using google charts API:


Example Explained

First add a <div> element with the id "chart-div" and set width and height:

<!DOCTYPE html> <html lang="en-US"> <body> <div id="chart-div" style="width:100%; height:350px;"></div> </body> </html>

Then add a reference to the Chart API:

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

Finally add a JavaScript function:

// Load the corechart package and set a callback google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table function drawChart() { // Create the data table var data = new google.visualization.DataTable(); data.addColumn('number', 'Year'); data.addColumn('number', 'Rate'); data.addRows([ [2000, 4], [2001, 4.9], [2002, 3.9], [2003, 7.9], [2004, 7.9], [2005, 9.3], [2006, 9.3], [2007, 9.8], [2008, 3.9], [2009, 8.5], [2010, 10.3], [2011, 6.5], [2012, 5.5], [2013, 6.4], [2014, 7.4], [2015, 8.2], [2016, 7.1], [2017, 6.8], [2018, 7], [2019, 7.2] ]); // Set chart options var options = { title: 'India / GDP growth rate', hAxis: {title: 'Year'}, vAxis: {title: 'GDP'} }; // Display the chart inside the <div> element with id="chart-div" var chart = new google.visualization.LineChart(document.getElementById('chart-div')); chart.draw(data, options); }


Controlling Colors

Following is an example of a line chart with custom colors.

As with all Google Charts, colors can be specified either as English names or as hex values.

// Set chart options var options = { hAxis: {title: 'Time'}, vAxis: {title: 'Popularity'}, colors: ['#a52714', '#097138'] };
Run code

Crosshair

Following is an example of a basic line chart with crosshairs to appear on selecting a data point.

// Set chart options var options = { hAxis: {title: 'Time'}, vAxis: {title: 'Popularity'}, colors: ['#a52714', '#097138'], crosshair: { color: '#000', trigger: 'selection' } };
Run code

Curving the Lines

You can smooth the lines by setting the curveType: 'function' option.

// Set chart options var options = { title: 'Company Performance', curveType: 'function', legend: { position: 'bottom' } };
Run code

Creating Material Line Charts

Material Line Charts have many small improvements over Classic Line Charts, including an improved color palette, rounded corners, clearer label formatting, tighter default spacing between series, softer gridlines, and titles (and the addition of subtitles).

Creating a Material Line Chart is similar to creating what we'll now call a "Classic" Line Chart.

You load the Google Visualization API (although with the 'line' package instead of the 'corechart' package):

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

And then create an object (but of class google.charts.Line instead of google.visualization.LineChart):

var chart = new google.charts.Line(document.getElementById('chart-div')); chart.draw(data, google.charts.Line.convertOptions(options));
Run code

Material Charts will not work in old versions of Internet Explorer. (IE8 and earlier versions don't support SVG, which Material Charts require.)


Animated Line Chart

Google charts can animate smoothly in one of two ways, either on startup when you first draw the chart, or when you redraw a chart after making a change in data or options.

To animate on startup:

  • Set your chart data and options. Be sure to set an animation duration and easing type
  • Set animation: {startup: true} — setting this in your options will cause your chart to start with series values drawn at the baseline, and animate out to their final state

Here is a simple example which animate smoothly on startup:

// Set chart options var options = { title: 'India / GDP growth rate', hAxis: {title: 'Year'}, vAxis: {title: 'GDP'}, animation: { duration: 2000, easing: 'out', startup: true } };
Run code

To animate a transition:

  • Start with an already rendered chart
  • Modify the data table or options
  • Specify the transition behavior using the animation option
  • Call chart.draw() on your chart to transition to the new values

Here is a simple example which changes the values presented in a chart upon each click on a button:

Click the button to animate chart:

Run code