在Chart.js（2.7.2）标签部分添加换行符

Question

I am populating the labels array with data from my API.

var chartData = {
    labels: [],
    datasets: [{
        yAxisID: 'Seconds',
        label: 'Min',
        backgroundColor: 'rgb(139, 0, 0)',
        data: []
    }, {
        label: 'Avg',
        backgroundColor: 'rgb(34,139,34)',
        data: []
    }, {
        label: 'Max',
        backgroundColor: 'rgb(255,165,0)',
        data: []
    }]
};

Here is my JS:

initJobHealth()
    .then(function(data){
        data.map(function (job) {
            var avg = job.job_duration_avg / 1000;
            avg = avg.toFixed(2);
            var max = job.job_duration_max / 1000;
            max = max.toFixed(2);
            var min = job.job_duration_min / 1000;
            min = min.toFixed(2);
            var sampleS = job.jobs_sample_size;
            var br = document.createElement("BR");
            chartData.labels.push(job.job_type + br + 'Sample Size ' + sampleS );
            chartData.datasets[0].data.push(min);
            chartData.datasets[1].data.push(avg);
            chartData.datasets[2].data.push(max);
        })
    })
    .then(initChart)

The goal is to insert a line break in the chartData.labels.push section between job.job_type and Sample Size string. When I insert var br in between the two and view the output on my localhost instead of getting a line break I get [object HTMLBRElement]

This is where I want sampleS to be

Data for job.job_type && SampleS = jobs_sample_size

View when adding var br into chartData.labels.push section view when adding var br

View when editing code to chartData.labels.push(job.job_type + br.outerHTML + 'Sample Size ' + sampleS ); View when editing code

Answer 1

It is because you add the object to a String. A solution could be

chartData.labels.push(job.job_type + '<br>Sample Size ' + sampleS );

or

chartData.labels.push(job.job_type + br.outerHTML + 'Sample Size ' + sampleS );