8

enter image description here

I'm trying to allow breaks on spaces for the labels of my data object. I've looked through configuration options on the Chartjs docs tick configuration to either allow line breaks or the ability to add a CSS class where I can handle this with break-word rules.

Data structure object:

{
    labels: ["Arts Languages and Communication", "Science, Techology and Health", "Business", "Society and Education"],
    datasets: [{label: "Fall 2014", data: [0,0,0,0]}...]
}

Options object:

{
    scales: {
        xAxes: [{ ticks: { /* no available options from docs */ } }]
    }
}

Desired outcome:

Words will break on spaces:

Arts Language
and Communication
curtybear
  • 1,458
  • 2
  • 20
  • 39

3 Answers3

18

If you want your xAxis label to wrap text then you need to pass the data in this format labels: [['LONG', 'LONG', 'LONG', 'LABEL'], "Blue", ['YELLOW', 'LONG'], "Green Green", "Purple", "Orange"]

So in your case -> labels:[['Arts Language', 'and Communication'], 'nextLabel', 'otherLabel']

See a working demo: http://jsfiddle.net/Lzo5g01n/11/

Kunal Khivensara
  • 1,619
  • 14
  • 21
0

If you want your xAxis label to wrap text then you need to pass the data in this format labels: [['LONG', 'LONG', 'LONG', 'LABEL'], "Blue", ['YELLOW', 'LONG'], "Green Green", "Purple", "Orange"]

So in your case -> labels:[['Arts Language', 'and Communication'], 'nextLabel', 'otherLabel']

See a working demo: http://jsfiddle.net/Lzo5g01n/11/

Adding auto-labels wrap:

    ticks: { 
        callback: val => [val.slice(x,y), val.slice(y)], 
    }
Mike Kolyadin
  • 1
0

I came across the same problem. Here's what I did:

const labels = ["label1","label2","label3"];
ticks: {
    autoSkip: false,
    maxRotation: 0,
    callback: (value: any, index: any, values: any) => {
        let label = labels[value];
        if(label == null){
            return '';
        }
        if (label.length > 15) {
            label = label.substring(0, 15);
            label += '..';
        }
            return label;
    },
},

Labels is your x values. This tick configuration, along with maxRotation and autoSkip, makes your xLabels end with ellipsis if they're too big. E.g.: If the label is "Arts Languages and Communication", it should become "Arts Languages.." You can still see the full label with the tooltip.

Fix
  • 1