]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Update docs a bit for new items. Small updates for tooltip labels.
authoretimberg <evert.timberg@gmail.com>
Sun, 18 Oct 2015 22:14:56 +0000 (18:14 -0400)
committeretimberg <evert.timberg@gmail.com>
Sun, 18 Oct 2015 22:14:56 +0000 (18:14 -0400)
docs/00-Getting-Started.md
src/core/core.tooltip.js

index cbbb5ba29c541a355b9083c14d5eaa565f169a63..39db54b3792fbbbe32169abd3055d271e2533bf1 100644 (file)
@@ -101,8 +101,22 @@ Chart.defaults.global = {
     // Element defaults defined in element extensions
     elements: {},
 
-    // Legend template string
-    legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i = 0; i < data.datasets.length; i++){%><li><span style=\"background-color:<%=data.datasets[i].backgroundColor%>\"><%if(data.datasets[i].label){%><%=data.datasets[i].label%><%}%></span></li><%}%></ul>",
+    // Legend callback function. 
+    // @param {Chart} chart : the chart object to generate a legend for
+    legendCallback: legendCallback: function(chart) {
+        var text = [];
+        text.push('<ul class="' + chart.id + '-legend">');
+        for (var i = 0; i < chart.data.datasets.length; i++) {
+            text.push('<li><span style="background-color:' + chart.data.datasets[i].backgroundColor + '">');
+            if (chart.data.datasets[i].label) {
+                text.push(chart.data.datasets[i].label);
+            }
+            text.push('</span></li>');
+        }
+        text.push('</ul>');
+
+        return text.join("");
+    }
 
     animation: {
         duration: 1000,
@@ -128,18 +142,38 @@ Chart.defaults.global = {
         caretSize: 8,
         cornerRadius: 6,
         xOffset: 10,
-        template: [
-            '<% if(label){ %>',
-            '<%=label %>: ',
-            '<% } %>',
-            '<%=value %>',
-        ].join(''),
-        multiTemplate: [
-            '<%if (datasetLabel){ %>',
-            '<%=datasetLabel %>: ',
-            '<% } %>',
-            '<%=value %>'
-        ].join(''),
+        // V2.0 introduces callback functions as a replacement for the template engine in v1. The tooltip
+        // has the following callbacks for providing text. For all functions, 'this' will be the tooltip object
+        // create from the Chart.Tooltip constructor
+        //
+        // All functions are called with the same arguments
+        // - xLabel : string or array of strings. This is the xDataValue for each item to be displayed in the tooltip
+        // - yLabel : string or array of strings. This is the yDataValue for each item to be displayed in the tooltip
+        // - index : number. Data index
+        // - datasetIndex : number. Dataset index 
+        // - data : object. Data object passed to chart
+        callbacks: {
+            beforeTitle: helpers.noop,
+            title: function(xLabel, yLabel, index, datasetIndex, data) {
+                // If there are multiple items, use the xLabel of the 
+                return helpers.isArray(xLabel) ? xLabel[0] : xLabel;
+            },
+            afterTitle: helpers.noop,
+
+            beforeBody: helpers.noop,
+
+            beforeLabel: helpers.noop,
+            label: function(xLabel, yLabel, index, datasetIndex, data) {
+                return this._data.datasets[datasetIndex].label + ': ' + yLabel;
+            },
+            afterLabel: helpers.noop,
+
+            afterBody: helpers.noop,
+
+            beforeFooter: helpers.noop,
+            footer: helpers.noop,
+            afterFooter: helpers.noop,
+        },
         multiKeyBackground: '#fff',
     },
 
index a45889d61224da2edf9d1c8a4dca59b18f49d23d..29c19488aa96b7c7da1c999ad44e6d604effa9fd 100644 (file)
@@ -40,7 +40,8 @@
                callbacks: {
                        beforeTitle: helpers.noop,
                        title: function(xLabel, yLabel, index, datasetIndex, data) {
-                               return this._options.tooltips.mode == 'single' ? data.datasets[datasetIndex].label : data.labels[index];
+                               // Pick first label for now
+                               return helpers.isArray(xLabel) ? xLabel[0] : xLabel;
                        },
                        afterTitle: helpers.noop,
 
@@ -48,7 +49,7 @@
 
                        beforeLabel: helpers.noop,
                        label: function(xLabel, yLabel, index, datasetIndex, data) {
-                               return xLabel + ': ' + yLabel;
+                               return this._data.datasets[datasetIndex].label + ': ' + yLabel;
                        },
                        afterLabel: helpers.noop,