]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
improve line-customTooltips sample
authorVille Hämäläinen <hamalainen.ville.p@gmail.com>
Sun, 28 Feb 2016 05:34:37 +0000 (07:34 +0200)
committerVille Hämäläinen <hamalainen.ville.p@gmail.com>
Sun, 28 Feb 2016 05:34:37 +0000 (07:34 +0200)
- set title for chart
- set same size canvas as other samples
- remove user select from canvas
- remove logs

samples/line-customTooltips.html

index 30298d27631e7460806cca972af4d0fb2a09f254..50c10642061ab18ad0cea25f01fd67027310bbc9 100644 (file)
@@ -6,16 +6,11 @@
   <script src="../dist/Chart.bundle.js"></script>
   <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <style>
-    #canvas-holder1 {
-      width: 300px;
-      margin: 20px auto;
+    canvas{
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
     }
-
-    #canvas-holder2 {
-      width: 50%;
-      margin: 20px 25%;
-    }
-
     #chartjs-tooltip {
       opacity: 1;
       position: absolute;
 </head>
 
 <body>
-  <div id="canvas-holder1">
-    <canvas id="chart1" width="300" height="100" />
+  <div id="canvas-holder1" style="width:75%;">
+    <canvas id="chart1"/>
   </div>
   <script>
     window.count = 0;
     Chart.defaults.global.pointHitDetectionRadius = 1;
     var customTooltips = function(tooltip) {
 
-      console.log(window.count++, tooltip);
-
       // Tooltip Element
       var tooltipEl = $('#chartjs-tooltip');
 
         type: 'line',
         data: lineChartData,
         options: {
+          title:{
+            display:true,
+            text:'Chart.js Line Chart - Custom Tooltips'
+          },
           tooltips: {
             enabled: false,
             custom: customTooltips