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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.3/immutable.min.js"></script>
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
  <link href='http://fonts.googleapis.com/css?family=Roboto:500' rel='stylesheet' type='text/css'>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="ct-chart ct-golden-section"></div>
</body>
</html>
 
body {
  font-family: 'Roboto', sans-serif;
}
 
var chart = new Chartist.Line('.ct-chart', {
  series: [{
    name: 'remaining',
    data: [
      {x: new Date(143134652600), y: 53},
      {x: new Date(143334652600), y: 40},
      {x: new Date(143354652600), y: 45},
      {x: new Date(143356652600), y: 41},
      {x: new Date(143366652600), y: 40},
      {x: new Date(143368652600), y: 38},
      {x: new Date(143378652600), y: 34},
      {x: new Date(143568652600), y: 32},
      {x: new Date(143569652600), y: 18},
      {x: new Date(143579652600), y: 11}
    ]
  }, {
    name: 'stories',
    data: [
      {x: new Date(143134652600), y: 53},
      {x: new Date(143334652600), y: 30},
      {x: new Date(143384652600), y: 30},
      {x: new Date(143568652600), y: 10}
    ]
  }]
}, {
  axisX: {
    type: Chartist.FixedScaleAxis,
    divisor: 5,
    labelInterpolationFnc: function(value) {
      return moment(value).format('MMM D');
    }
  },
  axisY: {
    onlyInteger: true,
    low: 0
  },
  series: {
    remaining: {
      lineSmooth: Chartist.Interpolation.step(),
      showPoint: false
    },
    stories: {
      lineSmooth: false
    }
  }
}, [
  ['screen and (min-width: 500px)', {
    showPoint: false
  }]
]);
Output 300px

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

Dismiss x
public
Bin info
gionkunzpro
0viewers