Skip to content

Commit 8c1e958

Browse files
tannerlinsleytannerlinsley
committed
External Tooltips, Documentation, and Samples
1 parent 7e97aa3 commit 8c1e958

File tree

5 files changed

+402
-61
lines changed

5 files changed

+402
-61
lines changed

‎docs/00-Getting-Started.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,9 @@ Chart.defaults.global = {
132132
// Boolean - Determines whether to draw tooltips on the canvas or not
133133
showTooltips: true,
134134

135+
// Function - Determines whether to execute the externalTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-external-tooltips))
136+
externalTooltips: false,
137+
135138
// Array - Array of string names to attach tooltip events
136139
tooltipEvents: ["mousemove", "touchstart", "touchmove"],
137140

‎docs/06-Advanced.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,39 @@ myLineChart.generateLegend();
7070
// => returns HTML string of a legend for this chart
7171
```
7272

73+
### External Tooltips
74+
75+
You can enable external tooltips in the global or chart configuration like so:
76+
77+
```javascript
78+
var myPieChart = new Chart(ctx).Pie(data, {
79+
externalTooltips: function(tooltip) {
80+
81+
// tooltip will be false if tooltip is not visible or should be hidden
82+
if (!tooltip) {
83+
return;
84+
}
85+
86+
// Otherwise, tooltip will be an object with all tooltip properties like:
87+
88+
// tooltip.caretHeight
89+
// tooltip.caretPadding
90+
// tooltip.chart
91+
// tooltip.cornerRadius
92+
// tooltip.fillColor
93+
// tooltip.font...
94+
// tooltip.text
95+
// tooltip.x
96+
// tooltip.y
97+
// etc...
98+
99+
};
100+
});
101+
```
102+
103+
See files `sample/pie-externalTooltips.html` and `sample/line-externalTooltips.html` for examples on how to get started.
104+
105+
73106
### Writing new chart types
74107

75108
Chart.js 1.0 has been rewritten to provide a platform for developers to create their own custom chart types, and be able to share and utilise them through the Chart.js API.

‎samples/line-externalTooltips.html

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
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>
8+
9+
<style>
10+
#canvas-holder1 {
11+
width: 300px;
12+
margin: 20px auto;
13+
}
14+
#canvas-holder2 {
15+
width: 50%;
16+
margin: 20px 25%;
17+
}
18+
#chartjs-tooltip {
19+
opacity: 1;
20+
position: absolute;
21+
background: rgba(0, 0, 0, .7);
22+
color: white;
23+
padding: 3px;
24+
border-radius: 3px;
25+
-webkit-transition: all .1s ease;
26+
transition: all .1s ease;
27+
pointer-events: none;
28+
-webkit-transform: translate(-50%, 0);
29+
transform: translate(-50%, 0);
30+
}
31+
.chartjs-tooltip-key{
32+
display:inline-block;
33+
width:10px;
34+
height:10px;
35+
}
36+
</style>
37+
</head>
38+
39+
<body>
40+
<div id="canvas-holder1">
41+
<canvas id="chart1" width="300" height="30" />
42+
</div>
43+
<div id="canvas-holder2">
44+
<canvas id="chart2" width="450" height="600" />
45+
</div>
46+
47+
<div id="chartjs-tooltip"></div>
48+
49+
50+
<script>
51+
52+
Chart.defaults.global.pointHitDetectionRadius = 1;
53+
Chart.defaults.global.externalTooltips = function(tooltip) {
54+
55+
var tooltipEl = $('#chartjs-tooltip');
56+
57+
if (!tooltip) {
58+
tooltipEl.css({
59+
opacity: 0
60+
});
61+
return;
62+
}
63+
64+
tooltipEl.removeClass('above below');
65+
tooltipEl.addClass(tooltip.yAlign);
66+
67+
var innerHtml = '';
68+
for (var i = tooltip.labels.length - 1; i >= 0; i--) {
69+
innerHtml += [
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>',
73+
'</div>'
74+
].join('');
75+
}
76+
tooltipEl.html(innerHtml);
77+
78+
tooltipEl.css({
79+
opacity: 1,
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,
85+
});
86+
};
87+
var randomScalingFactor = function() {
88+
return Math.round(Math.random() * 100);
89+
};
90+
var lineChartData = {
91+
labels: ["January", "February", "March", "April", "May", "June", "July"],
92+
datasets: [{
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()]
101+
}, {
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()]
110+
}]
111+
};
112+
113+
window.onload = function() {
114+
var ctx1 = document.getElementById("chart1").getContext("2d");
115+
window.myLine = new Chart(ctx1).Line(lineChartData, {
116+
showScale: false,
117+
pointDot : true,
118+
responsive: true
119+
});
120+
121+
var ctx2 = document.getElementById("chart2").getContext("2d");
122+
window.myLine = new Chart(ctx2).Line(lineChartData, {
123+
responsive: true
124+
});
125+
};
126+
</script>
127+
</body>
128+
129+
</html>

‎samples/pie-externalTooltips.html

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Pie 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>
8+
9+
<style>
10+
#canvas-holder {
11+
width: 100%;
12+
margin-top: 50px;
13+
text-align: center;
14+
}
15+
#chartjs-tooltip {
16+
opacity: 1;
17+
position: absolute;
18+
background: rgba(0, 0, 0, .7);
19+
color: white;
20+
padding: 3px;
21+
border-radius: 3px;
22+
-webkit-transition: all .1s ease;
23+
transition: all .1s ease;
24+
pointer-events: none;
25+
-webkit-transform: translate(-50%, 0);
26+
transform: translate(-50%, 0);
27+
}
28+
#chartjs-tooltip.below {
29+
-webkit-transform: translate(-50%, 0);
30+
transform: translate(-50%, 0);
31+
}
32+
#chartjs-tooltip.below:before {
33+
border: solid;
34+
border-color: #111 transparent;
35+
border-color: rgba(0, 0, 0, .8) transparent;
36+
border-width: 0 8px 8px 8px;
37+
bottom: 1em;
38+
content: "";
39+
display: block;
40+
left: 50%;
41+
position: absolute;
42+
z-index: 99;
43+
-webkit-transform: translate(-50%, -100%);
44+
transform: translate(-50%, -100%);
45+
}
46+
#chartjs-tooltip.above {
47+
-webkit-transform: translate(-50%, -100%);
48+
transform: translate(-50%, -100%);
49+
}
50+
#chartjs-tooltip.above:before {
51+
border: solid;
52+
border-color: #111 transparent;
53+
border-color: rgba(0, 0, 0, .8) transparent;
54+
border-width: 8px 8px 0 8px;
55+
bottom: 1em;
56+
content: "";
57+
display: block;
58+
left: 50%;
59+
top: 100%;
60+
position: absolute;
61+
z-index: 99;
62+
-webkit-transform: translate(-50%, 0);
63+
transform: translate(-50%, 0);
64+
}
65+
</style>
66+
</head>
67+
68+
<body>
69+
<div id="canvas-holder">
70+
<canvas id="chart-area1" width="50" height="50" />
71+
</div>
72+
<div id="canvas-holder">
73+
<canvas id="chart-area2" width="300" height="300" />
74+
</div>
75+
76+
<div id="chartjs-tooltip"></div>
77+
78+
79+
<script>
80+
Chart.defaults.global.externalTooltips = function(tooltip) {
81+
82+
// Tooltip Element
83+
var tooltipEl = $('#chartjs-tooltip');
84+
85+
// Hide if no tooltip
86+
if (!tooltip) {
87+
tooltipEl.css({
88+
opacity: 0
89+
});
90+
return;
91+
}
92+
93+
// Set caret Position
94+
tooltipEl.removeClass('above below');
95+
tooltipEl.addClass(tooltip.yAlign);
96+
97+
// Set Text
98+
tooltipEl.html(tooltip.text);
99+
100+
// Find Y Location on page
101+
var top;
102+
if (tooltip.yAlign == 'above') {
103+
top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
104+
} else {
105+
top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
106+
}
107+
108+
// Display, position, and set styles for font
109+
tooltipEl.css({
110+
opacity: 1,
111+
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
112+
top: tooltip.chart.canvas.offsetTop + top + 'px',
113+
fontFamily: tooltip.fontFamily,
114+
fontSize: tooltip.fontSize,
115+
fontStyle: tooltip.fontStyle,
116+
});
117+
};
118+
119+
var pieData = [{
120+
value: 300,
121+
color: "#F7464A",
122+
highlight: "#FF5A5E",
123+
label: "Red"
124+
}, {
125+
value: 50,
126+
color: "#46BFBD",
127+
highlight: "#5AD3D1",
128+
label: "Green"
129+
}, {
130+
value: 100,
131+
color: "#FDB45C",
132+
highlight: "#FFC870",
133+
label: "Yellow"
134+
}, {
135+
value: 40,
136+
color: "#949FB1",
137+
highlight: "#A8B3C5",
138+
label: "Grey"
139+
}, {
140+
value: 120,
141+
color: "#4D5360",
142+
highlight: "#616774",
143+
label: "Dark Grey"
144+
}];
145+
146+
window.onload = function() {
147+
var ctx1 = document.getElementById("chart-area1").getContext("2d");
148+
window.myPie = new Chart(ctx1).Pie(pieData);
149+
150+
var ctx2 = document.getElementById("chart-area2").getContext("2d");
151+
window.myPie = new Chart(ctx2).Pie(pieData);
152+
};
153+
</script>
154+
</body>
155+
156+
</html>

0 commit comments

Comments
 (0)