Previous All demos Next
From One to ThreeUse left and right arrows to move selectionFrom OneUse left and right arrows to move left selectionTo ThreeUse left and right arrows to move right selectionUse TAB to select grip buttons or left and right arrows to change selection100%Chart created using amCharts library
  • Open in:

Variable-width curved column chart

In this demo column width depends on the value and columns are sorted so that the ones with the lowest value are on top and always visible.

Demo source

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}

</style>

<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect

chart.data = [{
  "country": "One",
  "value1": 125,
  "value2": 525,
  "value3": 325
}, {
  "country": "Two",
  "value1": 825,
  "value2": 225,
  "value3": 525
}, {
  "country": "Three",
  "value1": 525,
  "value2": 325,
  "value3": 225
}];

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.minGridDistance = 40;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

var series = chart.series.push(new am4charts.CurvedColumnSeries());
series.dataFields.categoryX = "country";

series.dataFields.valueY = "value1";
series.tooltipText = "{valueY.value}"
series.columns.template.strokeOpacity = 0;
series.clustered = false;
series.hiddenState.properties.visible = true; // this is added in case legend is used and first series is hidden.

var series2 = chart.series.push(new am4charts.CurvedColumnSeries());
series2.dataFields.categoryX = "country";

series2.dataFields.valueY = "value2";
series2.tooltipText = "{valueY.value}"
series2.columns.template.strokeOpacity = 0;
series2.clustered = false;

var series3 = chart.series.push(new am4charts.CurvedColumnSeries());
series3.dataFields.categoryX = "country";

series3.dataFields.valueY = "value3";
series3.tooltipText = "{valueY.value}"
series3.columns.template.strokeOpacity = 0;
series3.clustered = false;

chart.cursor = new am4charts.XYCursor();
chart.cursor.maxTooltipDistance = 0;

chart.scrollbarX = new am4core.Scrollbar();


series.dataItems.template.adapter.add("width", (width, target) => {
  return am4core.percent(target.valueY / valueAxis.max * 100);
})

series2.dataItems.template.adapter.add("width", (width, target) => {
  return am4core.percent(target.valueY / valueAxis.max * 100);
})

series3.dataItems.template.adapter.add("width", (width, target) => {
  return am4core.percent(target.valueY / valueAxis.max * 100);
})

series.columns.template.events.on("parentset", function(event){
  event.target.zIndex = valueAxis.max - event.target.dataItem.valueY;
})

series2.columns.template.events.on("parentset", function(event){
  event.target.parent = series.columnsContainer;
  event.target.zIndex = valueAxis.max - event.target.dataItem.valueY;  
})

series3.columns.template.events.on("parentset", function(event){
  event.target.parent = series.columnsContainer;
  event.target.zIndex = valueAxis.max - event.target.dataItem.valueY;  
})




}); // end am4core.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>