Line Charts
Plot Series or DataFrame as lines. This function is useful to plot lines using DataFrame’s values as coordinates.

Examples

Basic Line plot on Series

1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
<meta charset="UTF-8">
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.min.js"></script>
8
<title>Document</title>
9
</head>
10
11
<body>
12
13
<div id="plot_div"></div>
14
<script>
15
16
const s = new dfd.Series([1, 3, 2, 6, 10, 34, 40, 51, 90, 75])
17
s.plot("plot_div").line()
18
19
</script>
20
</body>
21
22
</html>
Copied!

Line plots on DataFrame

The example below shows the plot of column values against a common x-axis (index)
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
<meta charset="UTF-8">
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.min.js"></script>
8
<title>Document</title>
9
</head>
10
11
<body>
12
13
<div id="plot_div"></div>
14
<script>
15
16
const df = new dfd.DataFrame({'pig': [20, 18, 489, 675, 1776],
17
'horse': [4, 25, 281, 600, 1900]}, {index: [1990, 1997, 2003, 2009, 2014]})
18
df.plot("plot_div").line()
19
20
</script>
21
</body>
22
23
</html>
Copied!
The example below shows how to plot two columns in a DataFrame against each other.
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
<meta charset="UTF-8">
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
<script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>
8
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.min.js"></script>
9
<title>Document</title>
10
</head>
11
12
<body>
13
14
<div id="plot_div"></div>
15
<script>
16
17
const df = new dfd.DataFrame({
18
'pig': [20, 18, 489, 675, 1776],
19
'horse': [4, 25, 281, 600, 1900]
20
}, { index: [1990, 1997, 2003, 2009, 2014] })
21
22
df.plot("plot_div").line({
23
config: {
24
x: 'pig', y: 'horse'
25
}
26
})
27
28
</script>
29
</body>
30
31
</html>
Copied!
To customize your plots, see the Customize your plot page