Legends for line charts at Chart.js

Question

I would like to set up a legend for the line data so that the graphic symbol of the legend is a string (stylized as an actual data string), not a field.

As far as I can tell from the source , the graphics can be a dot or a field, and the height of the field is fixed to the font size. The generateLabels parameter does not seem to allow propagation around these restrictions.

Version 2.2.1.

Thanks for any help.

Answer 1

This solution only works if you have a local version of Chart.js, since it needs to edit the function in the library source code, which cannot be done if you import it from the CDN.

To achieve what you want, you need to edit the drawLegendBox function ( link to source here ).

First, as if you want to make the legend pointStyle, add useLineStyle and set it to true as follows:

 options: { legend: { labels : { useLineStyle: true } } } 

Then you need to go to the local version of Chart.js (obvisouly, you cannot edit it if you import it from the CDN) and search for the drawLegendBox function (on Chart.js v2.2.1, this is approximately line 6460).

Scroll down a bit to see something like this:

 if (opts.labels && opts.labels.usePointStyle) { // Recalulate x and y for drawPoint() because its expecting // x and y to be center of figure (instead of top left) var radius = fontSize * Math.SQRT2 / 2; var offSet = radius / Math.SQRT2; var centerX = x + offSet; var centerY = y + offSet; // Draw pointStyle as legend symbol Chart.canvasHelpers.drawPoint(ctx, legendItem.pointStyle, radius, centerX, centerY); } // --- NEW CONDITION GOES HERE --- else { // Draw box as legend symbol ctx.strokeRect(x, y, boxWidth, fontSize); ctx.fillRect(x, y, boxWidth, fontSize); } 

And add this between two conditions:

 else if (opts.labels && opts.labels.useLineStyle) { ctx.strokeRect(x, y + fontSize / 2, boxWidth, 0); } 

In this editing, every time you set the useLineStyle parameter to true, the legend fields will be drawn as strings, as the following screenshot:

Answer 2

I was able to use pointStyle: line , in the dataset, and then use labels under the options: {usePointStyle: true,} ,

Answer 3

Just to improve this solution from Tektiv. If you want to show the dashed line, use this code in the same place.

(graph 2.7.2 around line 16289):

  if (opts.labels && opts.labels.usePointStyle) { // CHARTJS CODE } else if (opts.labels && opts.labels.useLineStyle) { if (legendItem.borderDash) { ctx.setLineDash(legendItem.borderDash); } ctx.beginPath(); ctx.moveTo(x, y + fontSize / 2); ctx.lineTo(x + boxWidth, y + fontSize / 2); ctx.stroke(); } else { // CHARTJS CODE } 

Answer 4

getting error does not work

ERROR in src / app / oee-trend-analysis / oee-trend-analysis.component.ts (208,12): TS2322 error: Type '{useLineStyle: boolean; , "useLineStyle" "ChartLegendLabelOptions".

Answer 5

in datasets: pointStyle: 'line', then in legend: labels: usePointStyle: true