Multiple line labels for chart js

Question

I have this radar chart in chart.js which has 5 labels. The labels are quite long so I want to show them in two lines in HTML but when I use "\n" it doesn't make a new line!

These are my labels:

labels: ["COMMUNICATION \n SKILL ", "PRODUCT AND PROCESS \n KNOWLEDGE "]

As you can see I'm trying to have "communication skill" and "product and process knowledge" both in two lines but it shows them in one line!

What's the correct way to do it?

UPDATE

The labels is in script tag:

var myChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ["COMMUNICATION  SKILL ", "PRODUCT AND PROCESS KNOWLEDGE "],
        datasets: [{
            label: labs,
            data: dps,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
            ],
            borderWidth: 1
        },
    options: {
        maintainAspectRatio: true,
        scale: {
            ticks:{
                beginAtZero: true,
                max: 4
            }
        }
    }
});

Answer 1

I believe what you are looking for is answered here: ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2

The solution is to pass a nested array as an input to 'labels' - with each element in the nested array representing a new line of text in your label. So in your case the following should work:

labels: [["COMMUNICATION","SKILL"], ["PRODUCT AND PROCESS","KNOWLEDGE"]]