chart.jschartjs-2.6.0

Chartjs break line for axes tick labels text

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
Solution

  • 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/