Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">
  <style>
      .charts-css {  /* You have to use this class name */
      height: 400px;  /* Most charts need some height to operate */
      width: 80%;  /* Optional */
      margin: 1em auto;  /* Optional */
    }
  </style>
</head>
<body>
  
  <table class="charts-css line show-labels show-heading show-primary-axis show-data-axes">
  <caption>Portfolio Prices</caption>
  <thead>
    <tr>
      <th scope="col">Date</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1970-12</th>
      <td style="--start:calc(37.434/1687.5420000000001);--size:calc(37.434/1687.5420000000001);">
        <span class="data">37.434</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1971-12</th>
      <td style="--start:calc(37.434/1687.5420000000001);--size:calc(43.455/1687.5420000000001);">
        <span class="data">43.455</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1972-12</th>
      <td style="--start:calc(43.455/1687.5420000000001);--size:calc(63.779/1687.5420000000001);">
        <span class="data">63.779</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1973-12</th>
      <td style="--start:calc(63.779/1687.5420000000001);--size:calc(106.236/1687.5420000000001);">
        <span class="data">106.236</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1974-12</th>
      <td style="--start:calc(106.236/1687.5420000000001);--size:calc(183.683/1687.5420000000001);">
        <span class="data">183.683</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1975-12</th>
      <td style="--start:calc(183.683/1687.5420000000001);--size:calc(139.279/1687.5420000000001);">
        <span class="data">139.279</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1976-12</th>
      <td style="--start:calc(139.279/1687.5420000000001);--size:calc(133.674/1687.5420000000001);">
        <span class="data">133.674</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1977-12</th>
      <td style="--start:calc(133.674/1687.5420000000001);--size:calc(160.48/1687.5420000000001);">
        <span class="data">160.48</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1978-12</th>
      <td style="--start:calc(160.48/1687.5420000000001);--size:calc(207.895/1687.5420000000001);">
        <span class="data">207.895</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1979-12</th>
      <td style="--start:calc(207.895/1687.5420000000001);--size:calc(463.666/1687.5420000000001);">
        <span class="data">463.666</span> 
      </td>
    </tr>
    <tr>
      <th scope="row">1980-12</th>
      <td style="--start:calc(463.666/1687.5420000000001);--size:calc(596.712/1687.5420000000001);">
        <span class="data">596.712</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1981-12</th>
      <td style="--start:calc(596.712/1687.5420000000001);--size:calc(410.119/1687.5420000000001);">
        <span class="data">410.119</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1982-12</th>
      <td style="--start:calc(410.119/1687.5420000000001);--size:calc(444.776/1687.5420000000001);">
        <span class="data">444.776</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1983-12</th>
      <td style="--start:calc(444.776/1687.5420000000001);--size:calc(388.06/1687.5420000000001);">
        <span class="data">388.06</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1984-12</th>
      <td style="--start:calc(388.06/1687.5420000000001);--size:calc(319.622/1687.5420000000001);">
        <span class="data">319.622</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1985-12</th>
      <td style="--start:calc(319.622/1687.5420000000001);--size:calc(321.985/1687.5420000000001);">
        <span class="data">321.985</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1986-12</th>
      <td style="--start:calc(321.985/1687.5420000000001);--size:calc(391.595/1687.5420000000001);">
        <span class="data">391.595</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1987-12</th>
      <td style="--start:calc(391.595/1687.5420000000001);--size:calc(487.079/1687.5420000000001);">
        <span class="data">487.079</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1988-12</th>
      <td style="--start:calc(487.079/1687.5420000000001);--size:calc(419.248/1687.5420000000001);">
        <span class="data">419.248</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1989-12</th>
      <td style="--start:calc(419.248/1687.5420000000001);--size:calc(409.655/1687.5420000000001);">
        <span class="data">409.655</span> 
      </td>
    </tr>
    <tr>
      <th scope="row">1990-12</th>
      <td style="--start:calc(409.655/1687.5420000000001);--size:calc(378.161/1687.5420000000001);">
        <span class="data">378.161</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1991-12</th>
      <td style="--start:calc(378.161/1687.5420000000001);--size:calc(361.875/1687.5420000000001);">
        <span class="data">361.875</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1992-12</th>
      <td style="--start:calc(361.875/1687.5420000000001);--size:calc(334.657/1687.5420000000001);">
        <span class="data">334.657</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1993-12</th>
      <td style="--start:calc(334.657/1687.5420000000001);--size:calc(383.243/1687.5420000000001);">
        <span class="data">383.243</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1994-12</th>
      <td style="--start:calc(383.243/1687.5420000000001);--size:calc(379.48/1687.5420000000001);">
        <span class="data">379.48</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1995-12</th>
      <td style="--start:calc(379.48/1687.5420000000001);--size:calc(387.445/1687.5420000000001);">
        <span class="data">387.445</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1996-12</th>
      <td style="--start:calc(387.445/1687.5420000000001);--size:calc(369.338/1687.5420000000001);">
        <span class="data">369.338</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1997-12</th>
      <td style="--start:calc(369.338/1687.5420000000001);--size:calc(288.776/1687.5420000000001);">
        <span class="data">288.776</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1998-12</th>
      <td style="--start:calc(288.776/1687.5420000000001);--size:calc(291.357/1687.5420000000001);">
        <span class="data">291.357</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">1999-12</th>
      <td style="--start:calc(291.357/1687.5420000000001);--size:calc(283.743/1687.5420000000001);">
        <span class="data">283.743</span> 
      </td>
    </tr>
    <tr>
      <th scope="row">2000-12</th>
      <td style="--start:calc(283.743/1687.5420000000001);--size:calc(271.892/1687.5420000000001);">
        <span class="data">271.892</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2001-12</th>
      <td style="--start:calc(271.892/1687.5420000000001);--size:calc(275.992/1687.5420000000001);">
        <span class="data">275.992</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2002-12</th>
      <td style="--start:calc(275.992/1687.5420000000001);--size:calc(333.3/1687.5420000000001);">
        <span class="data">333.3</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2003-12</th>
      <td style="--start:calc(333.3/1687.5420000000001);--size:calc(407.674/1687.5420000000001);">
        <span class="data">407.674</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2004-12</th>
      <td style="--start:calc(407.674/1687.5420000000001);--size:calc(442.974/1687.5420000000001);">
        <span class="data">442.974</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2005-12</th>
      <td style="--start:calc(442.974/1687.5420000000001);--size:calc(509.423/1687.5420000000001);">
        <span class="data">509.423</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2006-12</th>
      <td style="--start:calc(509.423/1687.5420000000001);--size:calc(629.513/1687.5420000000001);">
        <span class="data">629.513</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2007-12</th>
      <td style="--start:calc(629.513/1687.5420000000001);--size:calc(803.618/1687.5420000000001);">
        <span class="data">803.618</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2008-12</th>
      <td style="--start:calc(803.618/1687.5420000000001);--size:calc(819.94/1687.5420000000001);">
        <span class="data">819.94</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2009-12</th>
      <td style="--start:calc(819.94/1687.5420000000001);--size:calc(1135.012/1687.5420000000001);">
        <span class="data">1135.012</span> 
      </td>
    </tr>
    <tr>
      <th scope="row">2010-12</th>
      <td style="--start:calc(1135.012/1687.5420000000001);--size:calc(1393.512/1687.5420000000001);">
        <span class="data">1393.512</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2011-12</th>
      <td style="--start:calc(1393.512/1687.5420000000001);--size:calc(1652.725/1687.5420000000001);">
        <span class="data">1652.725</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2012-12</th>
      <td style="--start:calc(1652.725/1687.5420000000001);--size:calc(1687.342/1687.5420000000001);">
        <span class="data">1687.342</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2013-12</th>
      <td style="--start:calc(1687.342/1687.5420000000001);--size:calc(1221.588/1687.5420000000001);">
        <span class="data">1221.588</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2014-12</th>
      <td style="--start:calc(1221.588/1687.5420000000001);--size:calc(1200.44/1687.5420000000001);">
        <span class="data">1200.44</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2015-12</th>
      <td style="--start:calc(1200.44/1687.5420000000001);--size:calc(1068.317/1687.5420000000001);">
        <span class="data">1068.317</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2016-12</th>
      <td style="--start:calc(1068.317/1687.5420000000001);--size:calc(1152.165/1687.5420000000001);">
        <span class="data">1152.165</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2017-12</th>
      <td style="--start:calc(1152.165/1687.5420000000001);--size:calc(1265.674/1687.5420000000001);">
        <span class="data">1265.674</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2018-12</th>
      <td style="--start:calc(1265.674/1687.5420000000001);--size:calc(1249.887/1687.5420000000001);">
        <span class="data">1249.887</span> 
      </td>
    </tr>
    <tr>
      <th scope="row" class="hide-label">2019-12</th>
      <td style="--start:calc(1249.887/1687.5420000000001);--size:calc(1480.025/1687.5420000000001);">
        <span class="data">1480.025</span> 
      </td>
    </tr>
  </tbody>
</table>
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers