chart.crosshairs.js
Version:
Crosshairs plugin for Chart.js
175 lines (166 loc) • 5.13 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart Crosshairs</title>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
<script type="text/javascript" src="../../src/Chart.Crosshairs.js"></script>
<script>
if (location.protocol != 'file:') {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-44208259-3', 'auto');
ga('send', 'pageview');
}
</script>
</head>
<body>
<div id="header">
<h1>Chart Crosshairs</h1>
<a href="https://github.com/emn178/Chart.Crosshairs.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
</div>
<div id="body">
<div id="description">
<p>
Hover to show crosshairs.
</p>
</div>
<div class="charts">
<div class="row">
<div class="chart-wrapper">
<canvas id="canvas1"></canvas>
</div>
<div class="code">
<pre class="brush: js">
{
crosshairs: {
color: 'green'
}
}
</pre>
</div>
</div>
<div class="row">
<div class="chart-wrapper">
<canvas id="canvas2"></canvas>
</div>
<div class="code">
<pre class="brush: js">
{
crosshairs: {
color: 'green'
}
}
</pre>
</div>
</div>
<div class="row">
<div class="chart-wrapper">
<canvas id="canvas3"></canvas>
</div>
<div class="code">
<pre class="brush: js">
{
crosshairs: {
mode: 'both',
lineWidth: 3
}
}
</pre>
</div>
</div>
<div class="row">
<div class="chart-wrapper">
<canvas id="canvas4"></canvas>
</div>
<div class="code">
<pre class="brush: js">
{
crosshairs: {
mode: 'horizontal'
}
}
</pre>
</div>
</div>
</div>
</div>
<div id="footer">
© 2016 Chart.Crosshairs.js Demo
</div>
<script>
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
var options = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'x-axis'
},
crosshairs: {
color: 'green'
}
};
new Chart(document.getElementById("canvas1"), {
type: 'line',
data: data,
options: options
});
new Chart(document.getElementById("canvas2"), {
type: 'bar',
data: data,
options: options
});
options = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'x-axis'
},
crosshairs: {
mode: 'both',
lineWidth: 3
}
};
new Chart(document.getElementById("canvas3"), {
type: 'line',
data: data,
options: options
});
options = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'x-axis'
},
crosshairs: {
mode: 'horizontal'
}
};
new Chart(document.getElementById("canvas4"), {
type: 'line',
data: data,
options: options
});
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js"></script>
<script>
SyntaxHighlighter.all();
</script>
</body>
</html>