CODEWITHSUNDEEP
javascripthtmlstringchart.jsradar-chart
Moe
Moe

Reputation: 67

Multiple line labels for chart js

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
            }
        }
    }
});

Upvotes: 3

Views: 18727

Answers (2)

Villa07
Villa07

Reputation: 111

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"]]

Upvotes: 11

Thomas Valadez
Thomas Valadez

Reputation: 1747

Just read the docs https://www.chartjs.org/docs/latest/charts/radar.html you need your dataset to have the property data and that should be an array. The values in the array will correspond with the values in the labels by their index number. 

data: {
    labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
    datasets: [{
        data: [20, 10, 4, 2]
    }]
}

Upvotes: 4

Related Questions