Chartist-js: Series are plotted outside of plot area for values outside of low/high

[jacobq]

In many applications data that is to be plotted includes points that are outside of the plotting region of the chart. For example, one might want to show the graph of a mathematical function like f(x) = x^3 over the interval x = [-5, 5]. The minimum and maximum y values for this case would be f(-5) = -125 and f(5) = 125, but we might want to have a 1:1 aspect ratio (showing y values on the interval y = [-5, 5]) or otherwise "zoom in" on different parts of the graph. However, if one attempts to do this in Chartist right now it seems to continue drawing the series outside of the area where it belongs.

To demonstrate the problem, here is a very simple case based on the "Simple Line Chart" example where the low: 5 option has been specified. As you can see the second and third series both draw over the label area where their values are less than 5.
http://jsbin.com/pahiviw/edit?html,js,output

In my application I added a quick hack to work around this wherein I modified the projectValue function so that if the result is negative it is set to zero instead. However, this has the unfortunate side effect that it shows an incorrect value on the chart (the value isn't really zero). I tried using a value like undefined or NaN but this seemed to cause other problems (SVG line element got invalid length attribute or something like that).

It would be great if Chartist would "clip" the series to the plot area so that values outside of it are not shown.

[iamtheddrman]

+1 to this request. We're currently using chartist to draw a line plot over a fairly large range of x-values. In order to see the artifacts that may become important at runtime, we need to allow the user to adjust the bounds of the x-axis to get additional detail. Currently, if we adjust the lower x-axis bound to a higher value (effectively zooming in the x-axis), the line draws through the left edge of the graph and over the y-axis label. I would expect the line to stop drawing at the edge of the graph, at the solid line for the y-axis.

[davidmcclelland]

+1

[damianprzygodzki]

+1

[mkosichek]

Here's a working example (built on your js bin) using the on draw event

Basically, it determines the chart area, appends a clipPath element to the root svg element, then applies that clipPath to each element within a series (excludes gridlines and labels)

[jacobq]

@mkosichek Thanks for your effort. However, I opened this issue more than 1 year ago and am actually no longer using Chartist (plotly.js was a better fit for my use cases), so I'm going to close this.