Step Line with Round Corners

[Cristi S.]

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.

Thanks,
Cristian

[Cristi S.]

correction: lineCap and lineJoin.

[Bivek Singh]

@cristiscu

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

[Cristi S.]

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

[Cristi S.]

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.

Thanks,
-Cristian

[Suyash Singh]

Cristian,

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

___
Suyash Singh
Team CanvasJS

[Cristi S.]

Thanks, Suyash.

[Cristi S.]

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/

Cheers,
Cristi

[Bivek Singh]

@cristiscu,

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