Chart.js and long labels

Question

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!

Please provide your code . – Suraj Singh Jan 28 '14 at 15:46 — Suraj Singh, Jan 28 '14 at 15:46

score 51 · Answer 1 · edited Nov 16 '20 at 15:42

51

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",...],
   ...
}

edited Nov 16 '20 at 15:42

isherwood

46,000
15
100
132

answered Jun 18 '16 at 16:49

Arivan Bastos

1,797
1
16
26

@Yeats - The above solution works in v2.3 (vertical bar type chart, x-axis tick labels). So how about re-checking your code instead of profanity towards Arivan for this maybe not elegant but still functional solution? – Ross Dec 14 '16 at 18:18
I coudn't find any explicit mention to this in documentation itself but there's a [Multiline labels](http://www.chartjs.org/samples/latest/scales/multiline-labels.html) example in website [samples](http://www.chartjs.org/samples/latest/). – Álvaro González Aug 21 '18 at 12:55
It also does not seem to work on radar charts as the OP requested: https://github.com/chartjs/Chart.js/pull/2704#issuecomment-229646686 – Adam Aug 31 '18 at 10:39
spent 2 whole days trying to solve an issue and this answer solved it, you are the one. :) – Amr Elgarhy Oct 21 '18 at 17:13
this only works for the x-axis. any tips for the y axis? – user3662456 Dec 05 '18 at 21:48

score 25 · Answer 2 · edited May 23 '17 at 12:26

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

excellent, add it to the project, core or [plugin](http://www.chartjs.org/docs/latest/developers/plugins.html) — João Pimentel Ferreira, Jul 18 '17 at 19:48
btw, it should also be clear that `maxwidth`refers to characters and not pixels or any other measurements — João Pimentel Ferreira, Jul 18 '17 at 20:03
@fermin this works fine except it also adds a line break to the tooltip... not so ideal. — MizAkita, May 07 '18 at 04:45

Charitha Goonewardena · Answer 3 · 2019-10-21T06:01:03.567

9

To wrap the xAxes label, put the following code into optoins. (this will split from white space and wrap into multiple lines)

scales: {         
  xAxes: [
    {
      ticks: {
        callback: function(label) {
          if (/\s/.test(label)) {
            return label.split(" ");
          }else{
            return label;
          }              
        }
      }
    }
  ]
}

edited Oct 21 '19 at 06:01

answered Oct 21 '19 at 05:52

Charitha Goonewardena

2,725
1
26
30

2

It works, use this regex expression based wrapping than breaking label. Great. – Sarveshwar Oct 24 '19 at 08:53
Awesome and works when dynamically changing charts and re-rendering them, thank you. – Yair Cohen Oct 09 '20 at 09:05
The height doesn't auto-adjust when this technique is used for the y-axis. the text is written over each other – AliAvci Feb 08 '21 at 18:34

score 2 · Answer 4 · answered Jul 10 '14 at 13:51

2

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

answered Jul 10 '14 at 13:51

David Blurton

150
1
8

score 1 · Answer 5 · edited May 23 '17 at 10:30

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

score 0 · Answer 6 · answered Feb 14 '15 at 16:50

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.

score 0 · Answer 7 · answered Mar 19 '21 at 07:51

I found the best way to manipulate the labels on the radar chart was by using the pointlabels configuration from Chartjs.

let skillChartOptions = {
    scale: {
      pointLabels: {
        callback: (label: any) => {
          return label.length > 5 ? label.substr(0, 5) + '...' : label;
        },
      }, ...
    }, ...
}

Chart.js and long labels

7 Answers7

Linked