Curved Columns
Curved Column Chart (also known as Curved Bar Chart) is a visual variation of a “standard” bar chart. Semantically there’s no difference between regular and curved column chart. The only difference is that columns are displayed in the shape of areas instead of regular rectangles. This gives the chart a fresher visual look while sacrificing clarity a bit, as curves of the columns have no meaning.
This demo uses amCharts 5 ability to supply custom “draw” functions to virtually any element.
Related tutorials
Demo source
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(
am5xy.XYChart.new(root, {
panX: true,
panY: true,
wheelX: "panX",
wheelY: "zoomX",
paddingLeft: 5,
paddingRight:5
})
);
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
cursor.lineY.set("visible", false);
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xRenderer = am5xy.AxisRendererX.new(root, {
minGridDistance: 60,
minorGridEnabled: true
});
var xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
maxDeviation: 0.3,
categoryField: "country",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {})
})
);
xRenderer.grid.template.setAll({
location: 1
})
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
maxDeviation: 0.3,
renderer: am5xy.AxisRendererY.new(root, {
strokeOpacity: 0.1
})
})
);
// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(
am5xy.ColumnSeries.new(root, {
name: "Series 1",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value",
sequencedInterpolation: true,
categoryXField: "country"
})
);
series.columns.template.setAll({
width: am5.percent(120),
fillOpacity: 0.9,
strokeOpacity: 0
});
series.columns.template.adapters.add("fill", (fill, target) => {
return chart.get("colors").getIndex(series.columns.indexOf(target));
});
series.columns.template.adapters.add("stroke", (stroke, target) => {
return chart.get("colors").getIndex(series.columns.indexOf(target));
});
series.columns.template.set("draw", function(display, target) {
var w = target.getPrivate("width", 0);
var h = target.getPrivate("height", 0);
display.moveTo(0, h);
display.bezierCurveTo(w / 4, h, w / 4, 0, w / 2, 0);
display.bezierCurveTo(w - w / 4, 0, w - w / 4, h, w, h);
});
// Set data
var data = [{
country: "USA",
value: 2025
}, {
country: "China",
value: 1882
}, {
country: "Japan",
value: 1809
}, {
country: "Germany",
value: 1322
}, {
country: "UK",
value: 1122
}, {
country: "France",
value: 1114
}, {
country: "India",
value: 984
}, {
country: "Spain",
value: 711
}, {
country: "Netherlands",
value: 665
}, {
country: "South Korea",
value: 443
}, {
country: "Canada",
value: 441
}];
xAxis.data.setAll(data);
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>