javascript - How to move a legend to another line? - Stack Overflow

I'm using Chart.js and I'm trying to change the legend output. At the moment I have this code:

chart.options.plugins.legend.labels.generateLabels = (chart) => {
    const labels = [
        { text: `${dataset.label}`, fillStyle: dataset.borderColor },
        { text: `Last: ${lastValue}`, fillStyle: 'rgba(0, 0, 0, 0)' },
        { text: `Min: ${minValue}`, fillStyle: 'rgba(0, 0, 0, 0)' },
        { text: `Max: ${maxValue}`, fillStyle: 'rgba(0, 0, 0, 0)' },
        { text: `Avg: ${avgValue}`, fillStyle: 'rgba(0, 0, 0, 0)' }
    ];

    return labels;
};

I want to add additional lines (Last, Min, Max, Avg) under the main text (dataset.label value) so that they look like signatures.

I tried using \n, but it doesn't work.

How to correctly add additional lines under the main text of the legend in the Chart.js? Or is there a way to discard the legend and just add text under the graph?

I'm using Chart.js and I'm trying to change the legend output. At the moment I have this code:

chart.options.plugins.legend.labels.generateLabels = (chart) => {
    const labels = [
        { text: `${dataset.label}`, fillStyle: dataset.borderColor },
        { text: `Last: ${lastValue}`, fillStyle: 'rgba(0, 0, 0, 0)' },
        { text: `Min: ${minValue}`, fillStyle: 'rgba(0, 0, 0, 0)' },
        { text: `Max: ${maxValue}`, fillStyle: 'rgba(0, 0, 0, 0)' },
        { text: `Avg: ${avgValue}`, fillStyle: 'rgba(0, 0, 0, 0)' }
    ];

    return labels;
};

I want to add additional lines (Last, Min, Max, Avg) under the main text (dataset.label value) so that they look like signatures.

I tried using \n, but it doesn't work.

How to correctly add additional lines under the main text of the legend in the Chart.js? Or is there a way to discard the legend and just add text under the graph?

• javascript
• chart.js

Share Improve this question Follow edited Nov 20, 2024 at 7:41 Sadra Saderi 39444 silver badges1212 bronze badges asked Nov 20, 2024 at 7:28 MaximMaxim 1155 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

When you are using literal `` than just do a new line literally and that it. Example:

(I'm using "" in the example because it's show my answer as code temple, lol. Just use literal instead in your code)

const testStr = " Hello, 

World! ";

console.log(testStr);

/*
Hello, 

World! 
*/

If you still don't see new line, than just add this in your css file (check in the browser inspect what the tag has those text value and add it there):

div .chart-text{
 white-space: pre-line; or use
 white-space: pre-wrap; 
}

And you can also use the regular "" with \n, that can also works: "Last: \n" + lastValue

Let me know if it help you