Home Forums Report Bugs Step Line with Round Corners

Step Line with Round Corners

Viewing 9 posts - 1 through 9 (of 9 total)
  • #14927

    Take a look at this fiddle please: http://jsfiddle.net/cristiscu/1hmmg7fb/2/

    If I am not mistaken, last two lines should change the lineCap and linePad properties of a HTML canvas element (see this). However, I still get square corners instead.



    correction: lineCap and lineJoin.



    After setting lineCap and lineJoin properties, you need to re-render the chart. You can do so by calling chart.render() again or you can set those properties before first render. Please, take a look at this fiddle.

    Bivek Singh


    Thanks, Bivek. I thought I tried this but you are right…


    One other related question please (to avoid opening a new thread):

    Is it possible to show only the horizontal lines in a Step Line?

    The feature is common in some other apps and it is sometimes referred to as Jump Line.




    You can achieve this by adding null dataPoints in the stepLine chart, as shown in this example.

    Suyash Singh
    Team CanvasJS


    Thanks, Suyash.


    Just so you know, guys (a very small issue)…

    Going back to Bivek’s fiddle, it seems the lineCap/Join does not work with animation. Try adding “animationEnabled: true”: http://jsfiddle.net/cristiscu/1hmmg7fb/5/




    Providing user control for lineCap/lineJoin is on our roadMap but there is not a specific timeline for it yet. That was just a work-around which won’t work when animation is enabled.

    Bivek Singh,
    Team CanvasJS

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

You must be logged in to reply to this topic.