v2.0.0-Beta2 Labels Clipping on Small Charts

[zmoshansky]

Is there any way to prevent labels from being clipped on very small charts? I'd definitely prefer to have the chart grow vertically more to accommodate them as the examples show. Otherwise mobile is going to have a bad time.

     .moo {
        width: 100%;
        height: auto;
      }
...
     <div class="moo">
        <canvas id="moo"></canvas>
      </div>

380px:

~480px:

515px:

[etimberg]

Hmm, I don't we've ever automatically grown the canvas so I tagged as an enhancement. As a work-around you try using a min-width style to ensure that the canvas is always at least a certain size.

[zmoshansky]

That sounds great. As a work-around I've just shortened the labels substantially to help avoid the issue.

A few alternative enhancements that might be considered:

• Dynamically changing the canvas aspect ratio for smaller charts would also really help
• Ellipse labels that are too long
• Change the % of the ChartArea (Worked on this dataset for a small width, may not work well universally though).

Helpful Tips for others

I few things I learned that may be helpful to note for others with the same issue.
In Chrome, CSS styles change the canvas element size but not the inner canvas size or aspect ratio. Essentially meaning that is uses a default 3/2 ratio and scaled it to my CSS specified dimensions.

If the chart is set to be responsive, changing the aspect ratio slightly as follows helped give more room for labels/legend. I completely did away with the CSS as it definitely was behaving as expected and cause anti-aliasing issues as well. Turning the legend off window.Chart.defaults.global.legend = false; also leaves more room for labels.

 <canvas width=30 height=21></canvas>

[etimberg]

The aspect ratio is changeable if the maintainAspectRatio option is set to false in the config.

% of chart area is an interesting solution. In the code that fits all the scales, I wrote in a requirement that the chart area is at least 50% of the canvas width and height. The number was somewhat arbitrary. We could easily provide a config option to change it.

[zmoshansky]

I tried the maintainAspectRatio, but it seems to be broken. My chart only ever grows in height and quickly I end up with a chart that is 400 x 5000.

Playing with a dynamic aspect ratio actually yielded very nice results. So much so that I'll be keeping it in my version. Perhaps a callback option? dynamicHeight(aspectRatio, width, height); You can see the results below and I think they're really compelling, especially to respond from mobile(~380 px width) to desktop (1080p).

Adding the following line Here. (Proof of concept, don't mind the edge cases.)

var newHeight = newWidth < 400 ? newHeight : newWidth / (this.chart.aspectRatio + ((newWidth-400)/100 * 0.2));

Results

Stock aspect Ratio 300/280
~380px screen (matches above result, chart ~350 x 282px)

Chart (1383 x 455 px)

[etimberg]

Interesting idea with the config option. Will leave this targeted for v2.1 for now.

[etimberg]

@zmoshansky good news on this!. #2704 was merged which allows for multi-line labels. This should improve things in your case.

I also now know where the maintainAspectRatio problems are coming from. There are details in #2538 but the simplest work-around at the moment is to set the canvas to display: block

[etimberg]

I think between #2704 and #2538 this is now resolved