Chart.js: Allow wrapping in axis labels

[fulldecent]

Comparing Google Charts to Chart.js.

I would like to have wrapping on the axis labels to support the below effect.

[nnnick]

Annoyingly this is super awkward in canvas.

Shouldn't be too difficult to abstract out a method for writing multi lines of text, but some of the logic around scale fitting/positioning would have to be adjusted to cater for this.

Totally see the value though - would be a nice change.

Can you think of an API that would allow for both instances? Maybe have the label string as an array of lines?

[fulldecent]

A few ideas are below, in order of preference.

• Magically, like Google Charts
• Interpret new line literally
• Allow array where text is accepted
• Allow HTML in labels, so users can add <br> (needs a new bool option)

And also, be wary of:

JSON spec:
"All Unicode characters may be placed within the quotation marks except for the characters that must be escaped: quotation mark, reverse solidus, and the control characters (U+0000 through U+001F)."

So including a newline in JSON isn't just adding a newline in the string.

[fulldecent]

Duplicate of #358

[cobre420]

what is the solution?

[ckihneman]

I take it there is no solution here? This is a pretty important feature. I feel that it would be best to handle "magically" for best display at all times (maximizing actual chart space), but HTML in labels would probably suffice.

I get it that Chart.js is the lightweight version of the other chart plugins (which is why I like it, and want to use it everywhere), but it really needs this. I'm about to scrap a half day of work and use a different plugin (highcharts and google charts both handle this well, but are much heavier).

[RichardMisencik]

Any solution?

[paulodiogo]

Any solution?

We can use customTooltips to create with html..

[Jedarc]

Any solution?

[incredibleDeveloper]

Any Solution ?

[caneco]

Any Solution?

[Timer]

If you just need a quick solution which allows the use of \n's, you can git cherry-pick https://github.com/Chartjs/Chart.js/commit/d1b411f4fc2d7b9cafa2d235c9ee008d149a22e3.

[pthurmond-vmlyr]

@Timer I tried viewing your github link and github gives me a 404. Is your repo not public? That has happened to me before when I didn't log in and tried to access one of my private repos. Maybe a quick diff pasted in here?

[etimberg]

@vml-pthurmond i can't access it either. That being said, I'd be happy to merge a PR into v2 adding this functionality for scales. All scales have a common draw method so this shouldn't be repetitive.

[pthurmond-vmlyr]

@etimberg That might be helpful to others. Right now I need it for a v1 project. Specifically to use with a new StackedBar chart type we created. Unfortunately I don't have time to try to pull down v2 and make sure it doesn't break our site (trying to get this done before tomorrow).

You wouldn't have any pointers on doing that would you?

[etimberg]

The best way is to create a function that splits on newlines then calls fillText for each line. You'd also need to make sure to measure height of these blocks correctly

[LouisGac]

so any solution?

[MartinKei]

This works: https://github.com/chartjs/Chart.js/commit/d1b411f4fc2d7b9cafa2d235c9ee008d149a22e3

This is the link from above but corrected to point to the correct github repo.

At first I had troubles to get it to work because I forgot to add the context parameter to the each loop. But after fixing that it works just fine with v1.

[nickdegiacomo]

How about for V2? Does d1b411f work similarly for it?

[Baklap4]

Is this working in V2.1.2?
I'm using \n to create a newline within my label set. But it doesn't create a new line.....

[etimberg]

Implemented in V2 in #2704

[paulhuisman]

Thanks @etimberg !

[sylfabre]

@fulldecent @nnnick Is there any plan to make it works "magically"?
Using an array of strings is not the best solution as we need to make some calculations before using ChartJS and it does not work if the window is resized (ex: toggle between vertical / horizontal on mobile)

[Giovancruz]

+1 to magically works, because how implement the " [ ] " in time scale with displayFormat?

[thopah]

what's the solution?

[Baklap4]

@thopah quoted from the linked issue #2704

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. The appropriate calculations are made to determine the correct height and width, and rotation is still supported.

view samples/line-multiline-labels.html to see it working.

[stevencherry1]

Is there any way to make wrapping available for options.scales.yAxes scaleLabel? Having only one line is very limited for y axis label.

[KeithPepin-CyG]

Ditto for some x-axis labels when the label is long, would be nice to have it wrap.

[Crashillo]

Since you need an inner array to wrap labels, you may use this to achieve it:

const wrap = (str, limit) => {
    const words = str.split(" ");
    let aux = []
    let concat = []

    for (let i = 0; i < words.length; i++) {
      concat.push(words[i])
      let join = concat.join(' ')
      if (join.length > limit) {
        aux.push(join)
        concat = []
      }
    }

    if (concat.length) {
      aux.push(concat.join(' ').trim())
    }

    return aux
  }

From a string, it returns an array of words up to the limit you set

[s4m0r4m4]

Is there any way to make wrapping available for options.scales.yAxes scaleLabel? Having only one line is very limited for y axis label.

+1 to this! Should a new GH issue be created for this request? I see you can potentially wrap labels using arrays of strings, but I'm specifically talking about wrapping the y-axis label set by ChartOptions.scales.yAxes

[ezequiel9]

Just use an array instead a string.

data: [
    labels: [
        ['hey', 'how are', 'you'],
        ['hey', 'how are', 'you'],
        ['hey', 'how are', 'you'],
    ]
]

[s4m0r4m4]

Just use an array instead a string.

Yes that does wrap the label, but then you have to decide where you are breaking and wrapping the string. This can be difficult and depends on 3 things: 1) text size, 2) chart height, and 3) label length. (3) can change at run time (i.e. getting labels names from a server data source or something). (2) can change if the chart is resized during runtime. (1) might be able to be inferred from chart options I think, but I'm not sure.

So at the end of the day, requiring the user to manually wrap labels does not seem like a good long-term solution. Rather, a built-in solution that automatically allows for label wrapping would be preferred. Of course I acknowledge that there is dev time associated with that, and there are lots of priorities, I'm just trying to drive home the point that this is a valuable feature that is not covered by existing functionality to my knowledge.

[ezequiel9]

Just use an array instead a string.

Yes that does wrap the label, but then you have to decide where you are breaking and wrapping the string. This can be difficult and depends on 3 things: 1) text size, 2) chart height, and 3) label length. (3) can change at run time (i.e. getting labels names from a server data source or something). (2) can change if the chart is resized during runtime. (1) might be able to be inferred from chart options I think, but I'm not sure.

So at the end of the day, requiring the user to manually wrap labels does not seem like a good long-term solution. Rather, a built-in solution that automatically allows for label wrapping would be preferred. Of course I acknowledge that there is dev time associated with that, and there are lots of priorities, I'm just trying to drive home the point that this is a valuable feature that is not covered by existing functionality to my knowledge.

You could use also the script above

see:

```js
strToArray (str, limit) {
const words = str.split(' ')
let aux = []
let concat = []

        for (let i = 0; i < words.length; i++) {
            concat.push(words[i])
            let join = concat.join(' ')
            if (join.length > limit) {
                aux.push(join)
                concat = []
            }
        }

        if (concat.length) {
            aux.push(concat.join(' ').trim())
        }

        return aux
    }

````