Skip to main content

Line Cap and Line Join

CSS developers may be familiar with these two properties. For JavaScript chart libraries, they translate into lineCap/lineJoin for HTML canvas, and stroke-linecap/stroke-linejoin in SVG.

Line Cap determines how lines are displayed at both ends, while Line Join determines the style between two joined lines. The properties may have several standard values, but we will keep it simple with three basic styles, for both properties: sharp, round and cut (where cut is kind of a partially round). Use the LineCapJoin search keyword to locate all chart templates discussed in this article.

Inconsistent Styles

Several multi-app templates show you how lines appear for each individual chart application, by chart type. We isolated single and multi-series line and area charts. Look at the Line Cap/JoinDefaults, Sharp, Round and Cut templates, with few samples below:

Unpolished Styles

We have many inconsistencies from one chart app to another. FusionCharts shows only round corners, while Microsoft ASP.NET Charts display ugly straight corners for the emulated Jump charts. amCharts displays some lines sharp, others round. Most apps however display all lines with sharp corners. Looking closer (with a larger line width), some line joins may appear rather ugly and unpolished:

Going Consistent

Our single-app Line Cap/Join for … templates set a consistent style for both line caps and joins, per application. We mostly show round corners and line ends. Few examples here, where two JavaScript chart apps with default sharp line joins and ends – the SVG-based AnyChart and HTML canvas-based CanvasJS – have been adapted to display only consistent round corners and terminal points: