Simple Column Chart

Column Chart (also known as vertical bar chart) is one of the most common and, arguably, the easiest to read chart type when it comes to visualizing category-based values. Rectangular bars are placed along the category axis with bar length representing the value for a specific category.

by alcosbarco

HTML

<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>
<div id="div_amchart_des"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

// Create chart instance
var chart = am4core.create("div_amchart_des", am4charts.XYChart);

var jsondata = 
{"2017":
[{
  "elemento": "USA",
  "valor": 2025
}, {
  "elemento": "China",
  "valor": 1882
}, {
  "elemento": "Japan",
  "valor": 1809
}
]
};


// Add data
chart.data = jsondata[2017];




// Create axes

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

categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
  if (target.dataItem && target.dataItem.index & 2 == 2) {
    return dy + 25;
  }
  return dy;
});

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

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "valor";
series.dataFields.categoryX = "elemento";
series.name = "valor";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;

var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;


series.columns.template.events.on("hit", function(ev) {
  alert("Clicked on " + ev.target.dataItem.categoryX + ": " + ev.target.dataItem.valueY);
  mostrarInforme();
});