Line graph

Line graph (also known as Line chart) displays series of data points connected by straight line segments. Line graphs are often used to display time series chronologically with category axis (usually horizontal x-axis) serving as an evenly spaced date-time scale.

by amcharts

HTML

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.XYChart);

var data = [];
var value = 50;
for(var i = 0; i < 300; i++){
  var date = new Date();
  date.setHours(0,0,0,0);
  date.setDate(i);
  value -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
  data.push({date:date, value: value});
}

chart.data = [
  {
    "date": "2005-01-07",
    "close": 0.23100000231,
    "companyId": "H9X0SJ-R",
    "volume": "0.0"
  },
  {
    "date": "2005-01-10",
    "close": 0.23100000231,
    "companyId": "H9X0SJ-R",
    "volume": "0.0"
  },
  {
    "date": "2005-01-11",
    "close": 0.23100000231,
    "companyId": "H9X0SJ-R",
    "volume": "0.0"
  },
  {
    "date": "2005-01-12",
    "close": 0.23100000231,
    "companyId": "H9X0SJ-R",
    "volume": "0.0"
  },
  {
    "date": "2005-01-13",
    "close": 0.23100000231,
    "companyId": "H9X0SJ-R",
    "volume": "0.0"
  },
  {
    "date": "2005-01-14",
    "close": 0.23100000231,
    "companyId": "H9X0SJ-R",
    "volume": "0.0"
  },
  {
    "date": "2005-01-17",
    "close": 0.23100000231,
    "companyId": "H9X0SJ-R",
    "volume": "0.0"
  },
  {
    "date": "2005-01-18",
    "close": 0.23100000231,
    "companyId": "H9X0SJ-R",
    "volume": "0.0"
  },
  {
    "date": "2005-01-19",
    "close": 0.23100000231,
    "companyId": "H9X0SJ-R",
    "volume": "0.0"
  },
  {
    "date": "2005-01-20",
    "close": 0.23100000231,
    "companyId": "H9X0SJ-R",
    "volume": "0.0"
  },
  {
    "date": "2005-01-24",
    "close": 0.23100000231,
    "companyId": "H9X0SJ-R",
    "volume": "0.0"
  },
  {
    "date": "2005-01-25",
    "close": 0.23100000231,
    "companyId": "H9X0SJ-R",
   ...