## Overview
A line chart that is rendered within the browser using
[SVG](http://www.w3.org/Graphics/SVG/) or
[VML](http://en.wikipedia.org/wiki/Vector_Markup_Language).
Displays tooltips when hovering over points.
## Examples
## Curving the Lines
You can smooth the lines by setting the `curveType` option to `function`:
The code to generate this chart is below. Note the use of the `curveType: function`
option:
```
```
## Creating Material Line Charts
In 2014, Google announced guidelines intended to support a common look and feel across its
properties and apps (such as Android apps) that run on Google platforms. We call this effort
*Material Design*. We'll be providing "Material" versions of all our core charts; you're
welcome to use them if you like how they look.
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), define your datatable, and then create an object (but of
class `google.charts.Line` instead of `google.visualization.LineChart`).
**Note:** Material Charts will not work in old versions of Internet Explorer. (IE8 and earlier
versions don't support SVG, which Material Charts require.)
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).
```html
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
```
The Material Charts are in **beta** . The appearance and
interactivity are largely final, but many of the options available in Classic Charts are not yet
available in them. You can find a list of options that are not yet supported in
[this issue](https://github.com/google/google-visualization-issues/issues/2143).
Also, the way options are declared is not finalized, so if you are using any of
the classic options, you must convert them to material options by replacing this line:
**`chart.draw(data, options);`**
...with this:
`chart.draw(data, google.charts.Line.convertOptions(options));`
## Dual-Y Charts
Sometimes you'll want to display two series in a line chart, with two independent y-axes: a left
axis for one series, and a right axis for another:
\