# Line Charts

## Examples

### Basic Line plot on Series

```markup
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/danfojs@1.2.0/lib/bundle.min.js"></script>
    <title>Document</title>
</head>

<body>

    <div id="plot_div"></div>
    <script>

        const s = new dfd.Series([1, 3, 2, 6, 10, 34, 40, 51, 90, 75])
        s.plot("plot_div").line()

    </script>
</body>

</html>
```

![](https://3251798050-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB05JeHIrR5pfcM-_7L%2Fuploads%2Fgit-blob-6d5d7f71af16cb3f295a1521adb983e418b83248%2Fnewplot%20\(4\).png?alt=media\&token=47089e85-c1b5-4d75-8105-ff6da89a11b1)

### Line plots on DataFrame

The example below shows the plot of column values against a common x-axis (index)

```markup
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.jsdelivr.net/npm/danfojs@1.2.0/lib/bundle.min.js"></script>
    <title>Document</title>
</head>

<body>

    <div id="plot_div"></div>
    <script>

        const df = new dfd.DataFrame({'pig': [20, 18, 489, 675, 1776],
                               'horse': [4, 25, 281, 600, 1900]}, {index: [1990, 1997, 2003, 2009, 2014]})
        df.plot("plot_div").line()

    </script>
</body>

</html>
```

![](https://3251798050-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB05JeHIrR5pfcM-_7L%2Fuploads%2Fgit-blob-9f34611dd09a280c06d1a1f30b28dafc5f3936cb%2Fnewplot%20\(2\)%20\(2\).png?alt=media)

The example below shows how to plot two columns in a DataFrame against each other.

```markup
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script> 
     <script src="https://cdn.jsdelivr.net/npm/danfojs@1.2.0/lib/bundle.min.js"></script>
    <title>Document</title>
</head>

<body>

    <div id="plot_div"></div>
    <script>
    
      const df = new dfd.DataFrame({
        'pig': [20, 18, 489, 675, 1776],
        'horse': [4, 25, 281, 600, 1900]
      }, { index: [1990, 1997, 2003, 2009, 2014] })
  
      df.plot("plot_div").line({
        config: {
          x: 'pig', y: 'horse'
        }
      })

    </script>
</body>

</html>
```

![](https://3251798050-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB05JeHIrR5pfcM-_7L%2Fuploads%2Fgit-blob-d63d2657bb4ba54db85ef0a02bdb9561de0afdce%2Fnewplot%20\(3\).png?alt=media\&token=0a7ba9a1-c85f-4f81-b8c1-a47ebf6ca6cc)

{% hint style="info" %}
To customize your plots, see the [Customize your plot page](https://danfo.jsdata.org/api-reference/plotting/configuring-your-plots)
{% endhint %}
