Stroked tooltip colors

diff --git a/samples/line.html b/samples/line.html
index b954d7d15a94044a2f5918d0bf0733eed4208545..85ff667d324a51d85825c00995a81d91c16028af 100644 (file)
--- a/samples/line.html
+++ b/samples/line.html
@@ -22,19 +22,24 @@
         return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
     };
 
-    var lineChartData = {
-        labels: ["January", "February", "March", "April", "May", "June", "July"],
-        datasets: [{
-            label: "My First dataset",
-            data: [null, randomScalingFactor(), randomScalingFactor(), null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
-            fill: false,
-        }, {
-            label: "My Second dataset",
-            data: [null, randomScalingFactor(), randomScalingFactor(), null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
-        }]
+    var config = {
+        data: {
+            labels: ["January", "February", "March", "April", "May", "June", "July"],
+            datasets: [{
+                label: "My First dataset",
+                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+                fill: false,
+            }, {
+                label: "My Second dataset",
+                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+            }]
+        },
+        options: {
+            responsive: true
+        }
     };
 
-    $.each(lineChartData.datasets, function(i, dataset) {
+    $.each(config.data.datasets, function(i, dataset) {
         dataset.borderColor = randomColor(0.4);
         dataset.backgroundColor = randomColor(0.5);
         dataset.pointBorderColor = randomColor(0.7);
@@ -42,33 +47,17 @@
         dataset.pointBorderWidth = 1;
     });
 
-    console.log(lineChartData);
+    console.log(config.data);
 
     window.onload = function() {
         var ctx = document.getElementById("canvas").getContext("2d");
-        window.myLine = new Chart(ctx).Line({
-            data: lineChartData,
-            options: {
-                responsive: true,
-                hover: {
-                    mode: 'label',
-                },
-                stacked: false,
-                scales: {
-                    xAxes: [{
-                        gridLines: {
-                            offsetGridLines: false
-                        }
-                    }]
-                }
-            }
-        });
+        window.myLine = new Chart(ctx).Line(config);
     };
 
     $('#randomizeData').click(function() {
-        lineChartData.datasets[0].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
+        config.data.datasets[0].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
 
-        lineChartData.datasets[1].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
+        config.data.datasets[1].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
 
         window.myLine.update();
     });

diff --git a/src/Chart.Core.js b/src/Chart.Core.js
index 9c9587bd06cb6bdd11ecf0844503d86c84e3700a..8462b471487735d4ed598640ab604c30b137ecf0 100755 (executable)
--- a/src/Chart.Core.js
+++ b/src/Chart.Core.js
@@ -73,11 +73,11 @@
                 custom: null,
                 backgroundColor: "rgba(0,0,0,0.8)",
                 fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-                fontSize: 14,
+                fontSize: 10,
                 fontStyle: "normal",
                 fontColor: "#fff",
                 titleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-                titleFontSize: 14,
+                titleFontSize: 12,
                 titleFontStyle: "bold",
                 titleFontColor: "#fff",
                 yPadding: 6,
@@ -85,8 +85,30 @@
                 caretSize: 8,
                 cornerRadius: 6,
                 xOffset: 10,
-                template: "<%if (label){%><%=label%>: <%}%><%= value %>",
-                multiTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>",
+                template: [
+                    '<% if(label){ %>',
+                    '    <%=label %>:',
+                    '<% } %>',
+                    '<%=value %>',
+                ].join(''),
+                multiTemplate: [
+                    '<%if (datasetLabel){ %>',
+                    '   <%=datasetLabel %>:',
+                    '<% } %>',
+                    '<%=value %>'
+                ].join(''),
+                legendTemplate: [
+                    '<ul class="<% =name.toLowerCase() %>-legend">',
+                    '    <% for (var i=0; i<datasets.length; i++){ %>',
+                    '        <li>',
+                    '           <span style="background-color:<%=datasets[i].borderColor%>"></span>',
+                    '           <% if(datasets[i].label){ %>',
+                    '               <%=datasets[i].label %>',
+                    '           <% } %>',
+                    '        </li>',
+                    '    <% } %>',
+                    '</ul>',
+                ].join(''),
                 multiKeyBackground: '#fff',
 
             },
@@ -114,7 +136,7 @@
                     borderColor: defaultColor,
                     // Hover
                     hitRadius: 6,
-                    hoverRadius: 5,
+                    hoverRadius: 4,
                     hoverBorderWidth: 2,
                 },
             }
@@ -1120,6 +1142,9 @@
     extend(Chart.Element.prototype, {
         initialize: function() {},
         pivot: function() {
+            if (!this._view) {
+                this._view = clone(this._model);
+            }
             this._start = clone(this._view);
             return this;
         },
@@ -1790,8 +1815,8 @@
                         //ctx.clearRect(vm.x + vm.xPadding, this.getLineHeight(index + 1) - vm.fontSize/2, vm.fontSize, vm.fontSize);
                         //Instead we'll make a white filled block to put the legendColour palette over.
 
-                        ctx.fillStyle = helpers.color(vm.legendBackgroundColor).alpha(vm.opacity).rgbString();
-                        ctx.fillRect(vm.x + vm.xPadding, this.getLineHeight(index + 1) - vm.fontSize / 2, vm.fontSize, vm.fontSize);
+                        ctx.fillStyle = helpers.color(vm.legendColors[index].stroke).alpha(vm.opacity).rgbString();
+                        ctx.fillRect(vm.x + vm.xPadding - 1, this.getLineHeight(index + 1) - vm.fontSize / 2 - 1, vm.fontSize + 2, vm.fontSize + 2);
 
                         ctx.fillStyle = helpers.color(vm.legendColors[index].fill).alpha(vm.opacity).rgbString();
                         ctx.fillRect(vm.x + vm.xPadding, this.getLineHeight(index + 1) - vm.fontSize / 2, vm.fontSize, vm.fontSize);

diff --git a/src/Chart.Line.js b/src/Chart.Line.js
index 4def961689245a61cc46ab1ce28077c2a0ff7172..8ee9859875fe37ab611a3a57dcc43edd815aa851 100644 (file)
--- a/src/Chart.Line.js
+++ b/src/Chart.Line.js
@@ -13,7 +13,6 @@
             mode: "label"
         },
 
-        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].borderColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
         scales: {
             xAxes: [{
                 scaleType: "dataset", // scatter should not use a dataset axis
@@ -113,12 +112,9 @@
                         _model: {
                             x: 0, //xScale.getPixelForValue(null, index, true),
                             y: 0, //this.chartArea.bottom,
-                            //controlPointPreviousX: this.previousPoint(dataset.data, index).x,
-                            //controlPointPreviousY: this.previousPoint(dataset.data, index).y,
-                            //controlPointNextX: this.nextPoint(dataset.data, index).x,
-                            //controlPointNextY: this.nextPoint(dataset.data, index).y,
                         },
                     }));
+
                 }, this);
 
                 // The line chart onlty supports a single x axis because the x axis is always a dataset axis
@@ -215,6 +211,7 @@
                 });
             }, this);
 
+
             // Update control points for the bezier curve
             this.eachElement(function(point, index, dataset, datasetIndex) {
                 var controlPoints = helpers.splineCurve(
@@ -374,7 +371,6 @@
             for (var i = this.data.datasets.length - 1; i >= 0; i--) {
 
                 var dataset = this.data.datasets[i];
-                var datasetIndex = i;
 
                 // Transition Point Locations
                 helpers.each(dataset.metaData, function(point, index) {