Chart.js: The last fix broke the legend display

[lukazadel]

As the title says.

No custom css, or anything.

Markup:

<div id="lineGraph" class="col-lg-6" colour="primary">
    <div class="panel panel-primary">
        <div class="panel-heading"><i class="fa fa-line-chart"> </i> Graph</div>
        <canvas id="line" class="chart chart-line" chart-data="data"
                chart-labels="labels" chart-legend="true" chart-series="series"
                chart-click="onClick">
        </canvas>
    </div>

[etimberg]

@lukazadel what version are you using?

[lukazadel]

1.0.2 stable, with the last code uploaded.

[wandererfrog]

Hej, I get the same plus now I get an error when loading a Pie chart after I load a bar chart.

I didn't change my code... was hopelessly trying to find out what happened.

[eemikula]

I saw this same problem when upgrading from 1.0.2 to 1.1.0, and I believe the problem for the legend is the direct result of this change: https://github.com/nnnick/Chart.js/issues/886

The legend is displayed incorrectly because everything is within the span, when the text should actually be outside. My inclination is to think that change should be reverted.

[nagubal]

You can redefine the legendTemplate in order to revert to the previous way of generating the legend.
In my case, for a Doughnut Chart:

myDoughnutChart = new Chart(ctx).Doughnut(arrayGroupedByResolution, {
    ...
    tooltipTemplate : "<%if (label){%><%=label%>: <%}%><%= value %>" + " (<%= Math.round(circumference / 6.283 * 100) %>%)",
    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
});

Look for the legendTemplate in the Chart._{type}_.js source files (Chart.Bar.js, Chart.Line.js, etc.)

[eemikula]

Redefining the legendTemplate works, but it seems to me to be fixing it on the wrong end. Note that this change will also break the main page on chartjs.org whenever it's updated to version 1.1.0 - I simulated that by copying the same structure into a jsbin here: http://jsbin.com/likuwekeba/edit?html,console,output

Rather than having everyone who was happy with their legend need to customize their template, I think the template should be changed. If the original intent of the change was just to ensure that the text is enclosed in a tag that can be styled, then maybe there should be two separate spans used, so they can be styled independently. e.g.

<ul>
 <li>
  <span class="legend-icon" style="background-color:#d08770"></span><span class="legend-text">Text Goes Here</span>
 </li>
</ul>

[nagubal]

Indeed, I would prefer having two spans, to be able to style to my liking.

[etimberg]

@eemikula can you drop that in a PR? I'll merge it and package 1.1.1 release

[eemikula]

I made a PR with the change as described above, but I just wanted to highlight that if anyone else created a doughnut chart with a legend modeled after the one on the front page of chartjs.org, a CSS change will be necessary to accompany it, because the CSS used there applies to both spans generated by this change. Simply changing it to use the new class will restore the original behavior. I think this is the best change in terms of providing everyone the functionality they might want, but only if everyone knows about that.

[etimberg]

Fixed in 1.1.1 release