Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.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=Oxygen:300' rel='stylesheet' type='text/css'>
  <meta charset="utf-8">
  <title>Chartist.js - Aspect ratio containers</title>
</head>
<body>
  <div class="ct-chart ct-golden-section"></div>
</body>
</html>
 
html {
  font-family: Oxigen, Helvetica, Arial;
}
.ct-chart .ct-bar {
  stroke-width: 20px;
}
.ct-chart .ct-label.ct-horizontal {
  text-align: center;
}
 
new Chartist.Bar('.ct-chart', {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
  series: [
    [2, 8, 2, 4, 5, 8, 10],
    [4, 5, 8, 2, 6, 3, 10]
  ]
}, {
  seriesBarDistance: 30,
  axisX: {
    showGrid: false
  }
});
Output

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

Dismiss x
public
Bin info
gionkunzpro
0viewers