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 Rogério Saraceni

HTML

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></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: 300px;
}

JavaScript

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

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

var title = chart.titles.create();
title.text = "Brews(#)";
title.fontSize = 18;
title.fontWeight = 600;
title.textAlign = "middle";
title.align = "center";
title.fill = "#777777";

// Modify chart's colors
chart.colors.list = [
  am4core.color("rgba(3, 169, 244, 0.8)"),//azul claro
  am4core.color("rgba(246,95,110,0.8)"),//vermelho
  am4core.color("rgba(241,196,15,0.8)"),//laranja
  am4core.color("rgba(241,196,15,0.8)"),//laranja
  am4core.color("rgba(241,196,15,0.8)"),//laranja
];

// Add data
chart.data = [{
  "country": "USA",
  "visits": 220
}, {
  "country": "China",
  "visits": 150
}, {
  "country": "Japan",
  "visits": 100
}, {
  "country": "Germany",
  "visits": 120
},{
  "country": "Brazil",
  "visits": 80
}];

// Create categoryAxis
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
categoryAxis.renderer.grid.template.disabled = true;

// Create valueAxis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.grid.template.disabled = true;
	
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "visits";
series.dataFields.categoryX = "country";
series.name = "Visits";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;

var valueLabel = series.bullets.push(new am4charts.LabelBullet());
valueLabel.label.text = "{valueY}";
valueLabel.label.fontSize = 12;
valueLabel.label.verticalCenter = "top";
valueLabel.locationY = 0.1;

var columnTemplate = series.columns.template;
columnTemplate.width = am4core.percent(50);
columnTemplate.strokeWidth =...