Horizontal bars overflow border and legend despite xAxes ticks max

[vsergeev]

I'm trying to set an x axis maximum value on a horizontal bar chart. It seems that the ticks and x axis are limited correctly, but the bars overflow the border and, in some cases, the legend, despite the options.scales.xAxes[0].ticks.max value.

The vertical bar chart appears to behave correctly with an analogous y axis maximum value.

Horizontal bar chart JS Bin: http://jsbin.com/dicizunowa/edit?html,output

Vertical bar chart JS Bin: http://jsbin.com/livexawozi/1/edit?html,output

[etimberg]

In this case the vertical bar has the same problem but it's not seen. One solution is to add a plugin which implements clipping around the canvas area similar to what the core lib did before that caused problems with lines

[baublet]

I'm not sure if this is a bug. The values overflow the chart because you limited your chart tick to a max of 80, while your data has values of 100 and 120. So the ticks might be limited, but it's still drawing based on your data.

The vertical bar chart only appears to behave correctly because the vertical bars go beyond the canvas, and thus aren't seen, while the horizontal bars overflow the labels, which are on the canvas.

To fix this seems like you'd need to map through your data and limit your values to your tick limit or just change the max to your highest datapoint. Do we want Chart.js to do this automatically? It seems to me that allowing this by default might be a good idea (as a way to, e.g., show extreme outliers going off the chart).

Would a feature addition involve adding an option to clip the chart to the chart's canvas (and allowing other things like labels and ticks to be drawn outside of that canvas)?

For now, an easy solution for both of those pens is something like (assuming you will eventually not fully know the data):

data: [120, 5, 15, 30].map(d => d > 80? 80 : d)

This makes it so that each element over 80 is just turned into 80. It's not pretty or elegant, but you can either do that or just not set a max tick: http://jsbin.com/siripacena/1/edit?html,output

[etimberg]

@bakura10 I am on the fence whether this is a bug or an enhancement. I do kind of like the idea of leaving this as is (ie. marking it as won't fix) because it is easily solved by parsing the data added to the chart. Maybe someone could write a plugin that could support all kinds of options for handling this scenario and then plug into the update method to be called when the chart is updated.

Initially in V2 we implemented clipping (bars, points, etc) did not draw outside the chart area. Unfortunately, this caused problem with points that lie on the edge of the chart area so it was removed. The Zoom plugin that I wrote re-adds the clipping using the plugin system. Clipping could be added back, but it'd have to be more complicated than just simply clipping to a rectangle. This could potentially cause a performance problem.

[vsergeev]

I had been limiting the data for now as @baublet and @etimberg have suggested, however this solution may come at the expense of misrepresented values in the tooltip annotations to some (I happen to be rendering custom data there, so it isn't a problem for me).

As you guys have discussed, it seems that this comes down to whether or not you believe Chart.js should be responsible for windowing / clipping of the data. Most plotting frameworks I've used in the native world (e.g. matplotlib) do support this kind of windowing out of the box, but that may largely be because they're meant to be interactive and support zooming as well (which would pull in clipping, as @etimberg mentioned).

In my case, I'm rendering a bunch of benchmarks in a horizontal bar chart, and I have a few outliers that are still worth plotting, but not worth distorting the scale of the rest of the values. At first I thought that the default behavior of extending past the border was neat, but then I realized I had no control over it. The nifty enhancement I was looking for was the option to "cut-off the data gracefully" -- like with a zigzag or some other visual cue -- to convey that it's beyond normal values, while retaining its raw value in the tooltip. Probably not easy to do, but just a thought.

[Phoenixsong]

@etimberg Rather than adding the points to the clip area, would it be feasible to turn off clipping while drawing the points? Something similar to this: Phoenixsong#1

[etimberg]

Resolved in #3658