5 <title>Line Chart with Custom Tooltips</title>
6 <script src="../Chart.js"></script>
7 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
21 background: rgba(0, 0, 0, .7);
25 -webkit-transition: all .1s ease;
26 transition: all .1s ease;
28 -webkit-transform: translate(-50%, 0);
29 transform: translate(-50%, 0);
40 <div id="canvas-holder1">
41 <canvas id="chart1" width="300" height="30" />
43 <div id="canvas-holder2">
44 <canvas id="chart2" width="450" height="600" />
47 <div id="chartjs-tooltip"></div>
52 Chart.defaults.global.pointHitDetectionRadius = 1;
53 Chart.defaults.global.customTooltips = function(tooltip) {
55 var tooltipEl = $('#chartjs-tooltip');
64 tooltipEl.removeClass('above below');
65 tooltipEl.addClass(tooltip.yAlign);
68 for (var i = tooltip.labels.length - 1; i >= 0; i--) {
70 '<div class="chartjs-tooltip-section">',
71 ' <span class="chartjs-tooltip-key" style="background-color:' + tooltip.legendColors[i].fill + '"></span>',
72 ' <span class="chartjs-tooltip-value">' + tooltip.labels[i] + '</span>',
76 tooltipEl.html(innerHtml);
80 left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
81 top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
82 fontFamily: tooltip.fontFamily,
83 fontSize: tooltip.fontSize,
84 fontStyle: tooltip.fontStyle,
87 var randomScalingFactor = function() {
88 return Math.round(Math.random() * 100);
91 labels: ["January", "February", "March", "April", "May", "June", "July"],
93 label: "My First dataset",
94 fillColor: "rgba(220,220,220,0.2)",
95 strokeColor: "rgba(220,220,220,1)",
96 pointColor: "rgba(220,220,220,1)",
97 pointStrokeColor: "#fff",
98 pointHighlightFill: "#fff",
99 pointHighlightStroke: "rgba(220,220,220,1)",
100 data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
102 label: "My Second dataset",
103 fillColor: "rgba(151,187,205,0.2)",
104 strokeColor: "rgba(151,187,205,1)",
105 pointColor: "rgba(151,187,205,1)",
106 pointStrokeColor: "#fff",
107 pointHighlightFill: "#fff",
108 pointHighlightStroke: "rgba(151,187,205,1)",
109 data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
113 window.onload = function() {
114 var ctx1 = document.getElementById("chart1").getContext("2d");
115 window.myLine = new Chart(ctx1).Line(lineChartData, {
121 var ctx2 = document.getElementById("chart2").getContext("2d");
122 window.myLine = new Chart(ctx2).Line(lineChartData, {