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 amcharts

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="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: 150px;
  height: 30px;
}

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

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

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

// Add data
var data = [
  {
    "category": "20191201",
    "Total": 53412,
  },
  {
    "category": "20200101",
    "Total": 30023,
  },
  {
    "category": "20200201",
    "Total": 52033,
  },
  {
    "category": "20200301",
    "Total": 57684,
  },
  {
    "category": "20200401",
    "Total": 52707,
  },
  {
    "category": "20200501",
    "Total": 58205,
  },
  {
    "category": "20200601",
    "Total": 59083,
  },
  {
    "category": "20200701",
    "Total": 54517,
  },
  {
    "category": "20200801",
    "Total": 55494,
  },
  {
    "category": "20200901",
    "Total": 56182,
  },
  {
    "category": "20201001",
    "Total": 58522,
  },
  {
    "category": "20201101",
    "Total": 61210,
  }
];

am4core.options.autoSetClassName = true;
var container = am4core.create("chartdiv", am4core.Container);

container.dispose();
container = am4core.create("chartdiv", am4core.Container);
                
container.layout = "grid";
container.fixedWidthGrid = false;
container.width = am4core.percent(100);
container.height = am4core.percent(100);

var chart = container.createChild(am4charts.XYChart);
chart.dateFormatter.dateFormat = "MMM-yyyy";
chart.width = am4core.percent(100);
chart.height = 70;
chart.padding(0, 0, 30, 30);
// Add data
chart.data = data;
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
categoryAxis.renderer.labels.template.disabled = true;
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.cursorTooltipEnabled = false;

var valueAxis = chart.yAxes.push(new...