Chart.js and long labels

I use Chart.js to display a Radar Chart. My problem is that some labels are very long : the chart can't be display or it appears very small.

So, is there a way to break lines or to assign a max-width to the labels?

Thank you for your help!

For Chart.js 2.0+ you can use an array as label:

Quoting the DOCs: "Usage: If a label is an array as opposed to a string i.e. [["June","2015"], "July"] then each element is treated as a seperate line."

var data = {
   labels: [["My", "long", "long", "long", "label"], "another label",...],
   ...
}

Fermin Arellano

With ChartJS 2.1.6 and using @ArivanBastos answer

Just pass your long label to the following function, it will return your label in an array form, each element respecting your assigned maxWidth.

/* takes a string phrase and breaks it into separate phrases 
   no bigger than 'maxwidth', breaks are made at complete words.*/

function formatLabel(str, maxwidth){
    var sections = [];
    var words = str.split(" ");
    var temp = "";

    words.forEach(function(item, index){
        if(temp.length > 0)
        {
            var concat = temp + ' ' + item;

            if(concat.length > maxwidth){
                sections.push(temp);
                temp = "";
            }
            else{
                if(index == (words.length-1))
                {
                    sections.push(concat);
                    return;
                }
                else{
                    temp = concat;
                    return;
                }
            }
        }

        if(index == (words.length-1))
        {
            sections.push(item);
            return;
        }

        if(item.length < maxwidth) {
            temp = item;
        }
        else {
            sections.push(item);
        }

    });

    return sections;
}

You can write a javascript function to customize the label: // Interpolated JS string - can access value scaleLabel: "<%=value%>",

See http://www.chartjs.org/docs/#getting-started-global-chart-configuration

Chocksmith

Unfortunately there is no solution for this until now (April 5th 2016). There are multiple issues on Chart.js to deal with this:

https://github.com/nnnick/Chart.js/issues/358 (the main one)
https://github.com/nnnick/Chart.js/issues/608 (closed with no fix)
https://github.com/nnnick/Chart.js/issues/358 (closed with no fix)
https://github.com/nnnick/Chart.js/issues/780 (closed with no fix)
https://github.com/nnnick/Chart.js/issues/752 (closed with no fix)

This is a workaround: Remove x-axis label/text in chart.js

It seems you might be actually be talking about data labels and not the scale labels. In this case you'd want to use the pointLabelFontSize option. See below example:

var ctx = $("#myChart").get(0).getContext("2d");

var data = {
  labels: ["Eating", "Sleeping", "Coding"],
  datasets: [
    {
        label: "First",
        strokeColor: "#f00",
        pointColor: "#f00",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "#ccc",
        data: [45, 59, 90]
    },
    {
        label: "Second",
        strokeColor: "#00f",
        pointColor: "#00f",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "#ccc",
        data: [68, 48, 40]
    }
  ]
};

// This is the important part
var options = {
  pointLabelFontSize : 20
};

var myRadarChart = new Chart(ctx).Radar(data, options);

Finally you may want to play with the dimensions of your < canvas > element as I've found sometimes giving the Radar chart more height helps the auto scaling of everything.

来源：https://stackoverflow.com/questions/21409717/chart-js-and-long-labels

标签

charts

chart.js

radar-chart