Change legendTemplates to use separate spans for text and icon.

This addresses the issue in #2192 without entirely reverting #886. Note that it still may cause confusing behavior for some legends: Specifically, the example on chartjs.org styles ".doughnut-legend li span" with a fixed width, and therefore both of the new spans will be impacted by this styling. However, now two spans are generated instead. %name%-legend-icon is used for the color icon, and %name%-legend-text can be used for styling the text. This should be described in release notes.

diff --git a/src/Chart.Bar.js b/src/Chart.Bar.js
index 3be768bc2dac8904605c354de439c38eed904ae5..407212b6a409ec86abbbbb858ce74e91ab39d1ee 100644 (file)
--- a/src/Chart.Bar.js
+++ b/src/Chart.Bar.js
@@ -38,7 +38,7 @@
                barDatasetSpacing : 1,
 
                //String - A legend template
-               legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
+               legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=datasets[i].fillColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
 
        };
 

diff --git a/src/Chart.Doughnut.js b/src/Chart.Doughnut.js
index 4769305caf1969e752237486da4403e62c08aae2..87ff2dd746f6eeb89f2c839480db8c02187e17c6 100644 (file)
--- a/src/Chart.Doughnut.js
+++ b/src/Chart.Doughnut.js
@@ -32,7 +32,7 @@
                animateScale : false,
 
                //String - A legend template
-               legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"
+               legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=segments[i].fillColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"
 
        };
 

diff --git a/src/Chart.Line.js b/src/Chart.Line.js
index fdf1b0169b7ea324d8ff9ac167e4c5e323b2fe2b..bbde45cf557e18374ba27f118724e53f7c2e8b84 100644 (file)
--- a/src/Chart.Line.js
+++ b/src/Chart.Line.js
@@ -50,7 +50,7 @@
                datasetFill : true,
 
                //String - A legend template
-               legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>",
+               legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=datasets[i].strokeColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>",
 
                //Boolean - Whether to horizontally center the label and point dot inside the grid
                offsetGridLines : false

diff --git a/src/Chart.PolarArea.js b/src/Chart.PolarArea.js
index bf03f102b8f14a3cdfd410868883a001ce72da87..8b55a1cd304eb3a5d6036a199ce6386c88ccc991 100644 (file)
--- a/src/Chart.PolarArea.js
+++ b/src/Chart.PolarArea.js
@@ -47,7 +47,7 @@
                animateScale : false,
 
                //String - A legend template
-               legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"
+               legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=segments[i].fillColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"
        };
 
 

diff --git a/src/Chart.Radar.js b/src/Chart.Radar.js
index c45e0976134e66edad980516983d9efb23c19bb4..5b93ee911b0bdb37078c20a66b4d1ca73fd99ef8 100644 (file)
--- a/src/Chart.Radar.js
+++ b/src/Chart.Radar.js
@@ -65,7 +65,7 @@
                        datasetFill : true,
 
                        //String - A legend template
-                       legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
+                       legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=datasets[i].strokeColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
 
                },