label under chart being filled with chart area

[VinSpee]

Hi! I'm using chartist v0.2.1 and using the "area" feature. I noticed that on some charts, it fills the entire label area like so:

It seems like it works when the labels match the points. For example, this chart renders fine:

Is this related to #25? Any suggestions?

[gionkunz]

Hi There! Nice styling! :-)

The problem you're facing is that Chartist is always using the configured areaBase to close the area shape and this is by default 0. Check http://gionkunz.github.io/chartist-js/api-documentation.html#chartistline-method-line for the configuration defaults.

The areaBase value is used to close the shape which means that in your first example it tries to close the shape down until the value 0 which is very much off the chart.

Now you could either set the areaBase to your lowest level in the chart if you know this always or you could set your low config to 0 so that the chart is always including the value down to zero. This looks more like a financial chart though where it's probably not nice to always pivot the y axis at 0.

I think we could safely file a bug where we say that areaBase should be used as long as it's in the range of the low and high of the chart. Otherwise low or height should be used. This way the drawing will stop at 50 in your first chart. Let me think about this a bit more.

Cheers and thanks for the detailed report!
Gion

[gionkunz]

Also a nice trick if you'd like to draw charts that should look more accurate. Try to play around with https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering

Specially for the grid lines the style shape-rendering: crispEdges is very nice. I'm even thinking about to include that per default in the generated stylesheet for all grid lines.