Generate legend not found

[youknowriad]

Hi,

I have a small issue with legends, Chart.js has a generateLegend method to generate an html legend (based on legends templates). When I try this in nchart i get a not found function. Can this be added to nchart ?

Thanks

[fundon]

@youknowriad Please PR :smile:

[Tommassissimo]

I met the same problem with legend, could some one help to figure out or fix the issue

[fundon]

@Tommassissimo

The nchart 1.0.0 will be updated to the latest APIs of chart.js.

[fundon]

@youknowriad @Tommassissimo Currently, used the latest Chart.js, try it.

[youknowriad]

It worked perfectly with last version. Thanks a lot :)

[jgato]

Please, could I have an example of how to use it? Is it possible to see the legend in the generated png?

[fundon]

@jgato see examples

[jgato]

I have seen all the examples @fundon but I dont see anything about legends (or I am missing something). About legends I mean, in a linear graph with three data sets, a legend with titles for each data set (line).

[youknowriad]

@jgato In my use case, I generate an image from the canvas and us wkhtmtopdf to generate a pdf with the image and the html of the legend with a code like this

// imageFile contains the filename of the image generated from nchart canvas
$ = cheerio.load('<div><style>' +
            '.chartjs-legend li {display: inline-block;margin: 0 5px;} ' +
            '.chartjs-legend .pill {display: inline-block;width: 8px;height: 8px;border-radius: 2px;margin-right: 3px;} '+
            '.chartjs-legend {list-style: none;text-align: center;} ' +
          '</style></div>');
$('div').append('<img src="file://'+imageFile+'" />');
$('div').append(chart.generateLegend());

and the generated pdf looks like

[jgato]

But, is it possible to generate the image containing the labels?

Using object.generateLegend() I get the html code regarding the lables. How can I include that in the picture? Do I need to insert that into the canvas? Sorry because I have never used canvas before.

[youknowriad]

I think the best you could do, is using a trick like me and use wkhtmltoimage : First generate an html containing the image of the graph and the html of the legend than transform this html to an image using wkhtmltoimage

[jgato]

Thanks @youknowriad cheerion was the piece that I was missing, now I almost got it.

I have the legend, but not with the colours of the series. How can I get that? I guess I will need to modify the legendTemplate option, but I dont know how.

By the way the code to get that, just if it is useful for other people:

var myLineChartResponseTimes = new Chart(ctx).Line(data);

    canvas.toBuffer(function (err, buf) {
        if (err) throw err;

        // fs.writeFile(directory + "/" + title + ".png", buf);
        fs.writeFile(directory + "/" + title + ".png", buf, function (err){

            if (err) 
                throw err;

            var cheerio = require('cheerio');

            $ = cheerio.load('<div><style>' +
                             '.chartjs-legend li {display: inline-block;margin: 0 5px;} ' +
                             '.chartjs-legend .pill {display: inline-block;width: 8px;height: 8px;border-radius: 2px;margin-right: 3px;} '+
                             '.chartjs-legend {list-style: none;text-align: center;} ' +
                             '</style></div>');
            $('div').append('<img src="' + __dirname + '/' + directory + '/' + title + '.png" ></img>');

            $('div').append(myLineChartResponseTimes.generateLegend());

            var wkhtmltopdf = require('wkhtmltopdf');

            wkhtmltopdf($.html()).pipe(fs.createWriteStream('out.pdf'));
        });
    });

[youknowriad]

@jgato you're absolutely right I use something like this for the legendTemplate

chartOptions = {
    legendTemplate : '<ul class="chartjs-legend <%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span class="pill" style="background-color:<%=datasets[i].strokeColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
};