Mixed chart

by Anton

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

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

JavaScript

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.scrollbarX = new am4core.Scrollbar();

chart.data = [{
  "country": "USA",
  "visits": 3025,
  "likes": 2800,
  "arrests": 500
}, {
  "country": "China",
  "visits": 1882,
  "likes": 300,
  "arrests": 2200
}, {
  "country": "Japan",
  "visits": 1809,
  "likes": 2300,
  "arrests": 100
}];

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

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.minWidth = 50;
valueAxis.min = 0;
valueAxis.cursorTooltipEnabled = false;

// Create series
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.dataFields.valueY = "visits";
series1.dataFields.categoryX = "country";

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

var series3 = chart.series.push(new am4charts.LineSeries())
series3.dataFields.valueY = "arrests";
series3.dataFields.categoryX = "country";
series3.bullets.push(new am4charts.CircleBullet());
series3.strokeWidth = 2;
series3.stroke = new am4core.InterfaceColorSet().getFor("alternativeBackground");
series3.strokeOpacity = 0.5;
// How to offset?
// See https://www.amcharts.com/docs/v4/concepts/series/#Data_item_locations
series3.dataItems.template.locations.categoryX = 0.25;

// Cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panX";