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="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <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;
  font-size: 120%;
  background: #E9E9E9;
}
​
.tooltip {
  position: absolute;
  z-index: 1;
  padding: 5px;
  background: rgba(0, 0, 0, 0.3);
  opacity: 1;
  border-radius: 3px;
  text-align: center;
  pointer-events: none;
  color: white;
  transition: opacity .1s ease-out;
}
​
.tooltip.tooltip-hidden {
  opacity: 0;
}
​
.ct-chart {
  position: relative;
}
​
.ct-chart .ct-label.ct-horizontal,
.ct-chart .ct-label.ct-vertical {
  color: rgba(0, 0, 0, 0.3);
}
.ct-chart .ct-grid.ct-horizontal,
.ct-chart .ct-grid.ct-vertical {
  shape-rendering: crispEdges;
  stroke-width: 1px;
  stroke-dasharray: 1px 4px;
  stroke: rgba(0, 0, 0, 0.2);
}
​
.ct-chart .ct-point {
  stroke-width: 20px;
}
​
.ct-chart .ct-line {
  stroke-width: 3px;
}
​
.ct-chart .ct-series.ct-series-a .ct-point {
  stroke: #3299BB;
}
​
.ct-chart .ct-series.ct-series-a .ct-line {
  stroke: #3299BB;
}
​
.ct-chart .ct-series.ct-series-b .ct-point {
  stroke: #FF9900;
}
​
.ct-chart .ct-series.ct-series-b .ct-line {
  stroke: #FF9900;
}
​
.ct-chart.ct-blured .ct-point,
.ct-chart.ct-blured .ct-line {
  stroke-opacity: 0.2;
}
 
var chart = new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3, 4, 5, 6, 7],
  series: [{
    name: 'Blue series',
    data: [1, 3, 2, 6, 5, 4, 5]
  } , {
    name: 'Orange series',
    data: [2, 1, 1, 0, 3, 5.5, 3.5]
  }]
}, {
  low: 0,
  axisX: {
    offset: 25,
    labelOffset: {
      y: 10
    }
  },
  axisY: {
    offset: 35,
    labelOffset: {
      x: -10,
      y: 3
    }
  }
});
​
var $tooltip = $('<div class="tooltip tooltip-hidden"></div>').appendTo($('.ct-chart'));
 
$(document).on('mouseenter', '.ct-point', function() {
  var seriesName = $(this).closest('.ct-series').attr('ct:series-name'),
      value = $(this).attr('ct:value');
  
  $tooltip.text(seriesName + ': ' + value);
  $tooltip.removeClass('tooltip-hidden');
});
​
$(document).on('mouseleave', '.ct-point', function() {
  $tooltip.addClass('tooltip-hidden');
});
​
$(document).on('mousemove', '.ct-point', function(event) {
  console.log(event);
  $tooltip.css({
    left: (event.offsetX || event.originalEvent.layerX) - $tooltip.width() / 2,
    top: (event.offsetY || event.originalEvent.layerY) - $tooltip.height() - 20
  });
});
Output 300px

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

Dismiss x
public
Bin info
gionkunzpro
0viewers