Home forums Using CanvasJS Lines get cut off

This topic contains 1 reply, has 2 voices, and was last updated by  Vishwas R 8 months, 3 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #9839


    Hi Team,

    My JSFiddle Example: http://jsfiddle.net/Lw87uhsh/1/

    This is a small example of something I have created for a dashboard and evaluating canvasJS instead of ChartsJS. The chart shows a full workday and gets constantly updated during that day. As seen in the example, the spline values get cut off when their value is 0 due to how the spline is calculated.

    I know I could use minimum on axisY. I have already tested this with -0.3 which then looks pretty good, but the spline shouldnt even go below 0, in ChartJS the spline calculation is sharper when it gets to 0 and the line does not go below 0.
    Here with -0.3 minimum: http://jsfiddle.net/sd74hvdj/1/

    The problem with using minimum is when there are only 0’s, the line is shown right at the top: http://jsfiddle.net/fxqtw3kc/1/
    Obviously now I could set a maximum, but I would rather not go around setting min/max if not absolutely needed.

    Also using a line instead of spline looks pretty ugly when the Y-Axis is this close: http://jsfiddle.net/t8xn8ftf/1/
    And the line being cutoff also happens here.

    So I guess my requirements would be some kind of padding between the lowest line and the cutoff, or having some kind of z-index that would allow the line to float over the cutoff. Also making lines look a little smoother when compact would be great if possible.

    Kind regards,


    Vishwas R

    Hi Od,

    It’s a known issue in spline that the spline is overshoots, and it will be resolved in future versions. The clipping towards axis in line is as per design, as user can set thickness and it overlaps the axis and other elements, to avoid this kind of issues, line will be clipped.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.