Curved Column Series

XY#smoothing#xy

This quick tutorial will serve as an introduction to the special type of series - CurvedColumnSeries.

Prerequisites

Just so we’re in a familiar territory, let’s start with a basic column chart.

It has one Column series, with an adapter coloring each column a new color.

ResultJSHTMLCSS

Open in:New tabCodePenjsFiddle

Run

Column chart with alternating colorscolumn-chart-with-alternating-colors

Your just everyday normal column chart.

Turning on the waves

To turn this boring chart into a Curved column chart, all we have to do is to switch series type from ColumnSeries to CurvedColumnSeries:

let series = chart.series.push(new am4charts.CurvedColumnSeries());

var series = chart.series.push(new am4charts.CurvedColumnSeries());

{
  "series": [{
    "type": "CurvedColumnSeries",
    // ...
  }]
}

The rest of the settings go just like it was regular Column series.

Let’s see what we have now:

ResultJSHTMLCSS

Open in:New tabCodePenjsFiddle

Run

Curved column seriescurved-column-series

Nice, huh?

Tweaking wave width

Among other things, you can also control width of the curved column by changing tension setting.

A tension is a setting which indicates how strong anchor points attract the line to it. The values can range from 0 (totally lose) and 1 (maximum force).

A setting of 1 (one) will attract the line to it, resulting in perfectly straight lines and pointy columns.

Below is n example how different tension settings affect the actual series appearance: