Series are plotted outside of plot area for values outside of low/high

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.

[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.

[damianprzygodzki]

+1