<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/radar.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
												divwith a unique
										idin your HTML markup. Then initialize the chart via javascript. Click on the legend items to show/hide series. A special method `arrangeColumns` is added to this demo which nicely aniamtes columns so that they would always be centered within the cell.
am5.ready(function () {
    // Create root element
    // https://www.amcharts.com/docs/v5/getting-started/#Root_element
    var root = am5.Root.new("kt_amcharts_1");
    // Set themes
    // https://www.amcharts.com/docs/v5/concepts/themes/
    root.setThemes([
        am5themes_Animated.new(root)
    ]);
    // Create chart
    // https://www.amcharts.com/docs/v5/charts/xy-chart/
    var chart = root.container.children.push(am5xy.XYChart.new(root, {
        panX: false,
        panY: false,
        wheelX: "panX",
        wheelY: "zoomX",
        layout: root.verticalLayout
    }));
    // Add legend
    // https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
    var legend = chart.children.push(
        am5.Legend.new(root, {
            centerX: am5.p50,
            x: am5.p50
        })
    );
    var data = [...]
    // Create axes
    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
    var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
        categoryField: "year",
        renderer: am5xy.AxisRendererX.new(root, {
            cellStartLocation: 0.1,
            cellEndLocation: 0.9
        }),
        tooltip: am5.Tooltip.new(root, {})
    }));
    xAxis.data.setAll(data);
    var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        renderer: am5xy.AxisRendererY.new(root, {})
    }));
    // Add series
    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
    function makeSeries(name, fieldName) {
        var series = chart.series.push(am5xy.ColumnSeries.new(root, {
            name: name,
            xAxis: xAxis,
            yAxis: yAxis,
            valueYField: fieldName,
            categoryXField: "year"
        }));
        series.columns.template.setAll({
            tooltipText: "{name}, {categoryX}:{valueY}",
            width: am5.percent(90),
            tooltipY: 0
        });
        series.data.setAll(data);
        // Make stuff animate on load
        // https://www.amcharts.com/docs/v5/concepts/animations/
        series.appear();
        series.bullets.push(function () {
            return am5.Bullet.new(root, {
                locationY: 0,
                sprite: am5.Label.new(root, {
                    text: "{valueY}",
                    fill: root.interfaceColors.get("alternativeText"),
                    centerY: 0,
                    centerX: am5.p50,
                    populateText: true
                })
            });
        });
        legend.data.push(series);
    }
    makeSeries("Europe", "europe");
    makeSeries("North America", "namerica");
    makeSeries("Asia", "asia");
    makeSeries("Latin America", "lamerica");
    makeSeries("Middle East", "meast");
    makeSeries("Africa", "africa");
    // Make stuff animate on load
    // https://www.amcharts.com/docs/v5/concepts/animations/
    chart.appear(1000, 100);
}); // end am5.ready()
														
<div class="card card-bordered">
    <div class="card-body">
        <div id="kt_amcharts_1" style="height: 500px;"></div>
    </div>
</div>
														divwith a unique
										idin your HTML markup. Then initialize the chart via javascript. This demo shows comparison of two line series from different periods.
am5.ready(function () {
    var data = [];
    var price0 = 1000,
        price1 = 1200;
    for (var i = 0; i < 360; i++) {
        price0 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);
        data.push({ date0: new Date(2015, 0, i).getTime(), price0: price0 });
    }
    for (var i = 0; i < 360; i++) {
        price1 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);
        data.push({ date1: new Date(2017, 0, i).getTime(), price1: price1 });
    }
    // Create root element
    // https://www.amcharts.com/docs/v5/getting-started/#Root_element
    var root = am5.Root.new("kt_amcharts_2");
    // Set themes
    // https://www.amcharts.com/docs/v5/concepts/themes/
    root.setThemes([
        am5themes_Animated.new(root)
    ]);
    // Create chart
    // https://www.amcharts.com/docs/v5/charts/xy-chart/
    var chart = root.container.children.push(
        am5xy.XYChart.new(root, {
            panX: true,
            panY: true,
            wheelX: "panX",
            wheelY: "zoomX"
        })
    );
    // Add cursor
    // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
    var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
        behavior: "none"
    }));
    cursor.lineY.set("visible", false);
    // Create axes
    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
    var xAxis0 = chart.xAxes.push(
        am5xy.DateAxis.new(root, {
            baseInterval: { timeUnit: "day", count: 1 },
            renderer: am5xy.AxisRendererX.new(root, {}),
            tooltip: am5.Tooltip.new(root, {}),
            tooltipDateFormat: "yyyy-MM-dd"
        })
    );
    var xAxis1 = chart.xAxes.push(
        am5xy.DateAxis.new(root, {
            marginTop: 10,
            baseInterval: { timeUnit: "day", count: 1 },
            renderer: am5xy.AxisRendererX.new(root, {}),
            tooltip: am5.Tooltip.new(root, {}),
            tooltipDateFormat: "yyyy-MM-dd"
        })
    );
    var yAxis = chart.yAxes.push(
        am5xy.ValueAxis.new(root, {
            maxDeviation: 1,
            renderer: am5xy.AxisRendererY.new(root, { pan: "zoom" })
        })
    );
    // Add series
    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
    var series0 = chart.series.push(
        am5xy.LineSeries.new(root, {
            name: "Series",
            xAxis: xAxis0,
            yAxis: yAxis,
            valueYField: "price0",
            valueXField: "date0",
            tooltip: am5.Tooltip.new(root, {
                labelText: "{valueY}"
            })
        })
    );
    var series1 = chart.series.push(
        am5xy.LineSeries.new(root, {
            name: "Series",
            xAxis: xAxis1,
            yAxis: yAxis,
            valueYField: "price1",
            valueXField: "date1",
            tooltip: am5.Tooltip.new(root, {
                labelText: "{valueY}"
            })
        })
    );
    // Add scrollbar
    // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
    var scrollbar = chart.set("scrollbarX", am5xy.XYChartScrollbar.new(root, {
        orientation: "horizontal",
        height: 60
    }));
    var sbDateAxis = scrollbar.chart.xAxes.push(
        am5xy.DateAxis.new(root, {
            baseInterval: {
                timeUnit: "day",
                count: 1
            },
            renderer: am5xy.AxisRendererX.new(root, {})
        })
    );
    var sbValueAxis = scrollbar.chart.yAxes.push(
        am5xy.ValueAxis.new(root, {
            renderer: am5xy.AxisRendererY.new(root, {})
        })
    );
    var sbSeries = scrollbar.chart.series.push(
        am5xy.LineSeries.new(root, {
            valueYField: "price0",
            valueXField: "date0",
            xAxis: sbDateAxis,
            yAxis: sbValueAxis
        })
    );
    series0.data.setAll(data);
    series1.data.setAll(data);
    sbSeries.data.setAll(data);
    // Make stuff animate on load
    // https://www.amcharts.com/docs/v5/concepts/animations/
    series0.appear(1000);
    series1.appear(1000);
    chart.appear(1000, 100);
}); // end am5.ready()
														
<div class="card card-bordered">
    <div class="card-body">
        <div id="kt_amcharts_2" style="height: 500px;"></div>
    </div>
</div>
														divwith a unique
										idin your HTML markup. Then initialize the chart via javascript. Each slice in pie series can have individual radius value, coming directly from data.
am5.ready(function () {
    // Create root element
    // https://www.amcharts.com/docs/v5/getting-started/#Root_element
    var root = am5.Root.new("kt_amcharts_3");
    // Set themes
    // https://www.amcharts.com/docs/v5/concepts/themes/
    root.setThemes([
        am5themes_Animated.new(root)
    ]);
    // Create chart
    // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
    var chart = root.container.children.push(am5percent.PieChart.new(root, {
        layout: root.verticalLayout
    }));
    // Create series
    // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
    var series = chart.series.push(am5percent.PieSeries.new(root, {
        alignLabels: true,
        calculateAggregates: true,
        valueField: "value",
        categoryField: "category"
    }));
    series.slices.template.setAll({
        strokeWidth: 3,
        stroke: am5.color(0xffffff)
    });
    series.labelsContainer.set("paddingTop", 30)
    // Set up adapters for variable slice radius
    // https://www.amcharts.com/docs/v5/concepts/settings/adapters/
    series.slices.template.adapters.add("radius", function (radius, target) {
        var dataItem = target.dataItem;
        var high = series.getPrivate("valueHigh");
        if (dataItem) {
            var value = target.dataItem.get("valueWorking", 0);
            return radius * value / high
        }
        return radius;
    });
    // Set data
    // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
    series.data.setAll([{
        value: 10,
        category: "One"
    }, {
        value: 9,
        category: "Two"
    }, {
        value: 6,
        category: "Three"
    }, {
        value: 5,
        category: "Four"
    }, {
        value: 4,
        category: "Five"
    }, {
        value: 3,
        category: "Six"
    }]);
    // Create legend
    // https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
    var legend = chart.children.push(am5.Legend.new(root, {
        centerX: am5.p50,
        x: am5.p50,
        marginTop: 15,
        marginBottom: 15
    }));
    legend.data.setAll(series.dataItems);
    // Play initial series animation
    // https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
    series.appear(1000, 100);
}); // end am5.ready()
														
<div class="card card-bordered">
    <div class="card-body">
        <div id="kt_amcharts_3" style="height: 500px;"></div>
    </div>
</div>
														divwith a unique
										idin your HTML markup. Then initialize the chart via javascript.
am5.ready(function () {
    // Create root element
    // https://www.amcharts.com/docs/v5/getting-started/#Root_element
    var root = am5.Root.new("kt_amcharts_4");
    // Create custom theme
    // https://www.amcharts.com/docs/v5/concepts/themes/#Quick_custom_theme
    const myTheme = am5.Theme.new(root);
    myTheme.rule("Label").set("fontSize", 10);
    myTheme.rule("Grid").set("strokeOpacity", 0.06);
    // Set themes
    // https://www.amcharts.com/docs/v5/concepts/themes/
    root.setThemes([
        am5themes_Animated.new(root),
        myTheme
    ]);
    // Data
    var temperatures = {
        "EUROPE": [...],
        "AFRICA": [...],
        "AMERICA": [...],
        "ASIA": [...],
        "OCEANIA": [...]
    }
    // Modify defaults
    root.numberFormatter.set("numberFormat", "+#.0°C|#.0°C|0.0°C");
    var startYear = 1973;
    var endYear = 2016;
    var currentYear = 1995;
    var div = document.getElementById("chartdiv");
    var colorSet = am5.ColorSet.new(root, {});
    // Create chart
    // https://www.amcharts.com/docs/v5/charts/radar-chart/
    var chart = root.container.children.push(am5radar.RadarChart.new(root, {
        panX: false,
        panY: false,
        wheelX: "panX",
        wheelY: "zoomX",
        innerRadius: am5.percent(40),
        radius: am5.percent(65),
        startAngle: 270 - 170,
        endAngle: 270 + 170
    }));
    // Add cursor
    // https://www.amcharts.com/docs/v5/charts/radar-chart/#Cursor
    var cursor = chart.set("cursor", am5radar.RadarCursor.new(root, {
        behavior: "zoomX",
        radius: am5.percent(40),
        innerRadius: -25
    }));
    cursor.lineY.set("visible", false);
    // Create axes and their renderers
    // https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
    var xRenderer = am5radar.AxisRendererCircular.new(root, {
        minGridDistance: 10
    });
    xRenderer.labels.template.setAll({
        radius: 10,
        textType: "radial",
        centerY: am5.p50
    });
    var yRenderer = am5radar.AxisRendererRadial.new(root, {
        axisAngle: 90
    });
    yRenderer.labels.template.setAll({
        centerX: am5.p50
    });
    var categoryAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
        maxDeviation: 0,
        categoryField: "country",
        renderer: xRenderer
    }));
    var valueAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        min: -3,
        max: 6,
        extraMax: 0.1,
        renderer: yRenderer
    }));
    // Create series
    // https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
    var series = chart.series.push(am5radar.RadarColumnSeries.new(root, {
        calculateAggregates: true,
        name: "Series",
        xAxis: categoryAxis,
        yAxis: valueAxis,
        valueYField: "value" + currentYear,
        categoryXField: "country",
        tooltip: am5.Tooltip.new(root, {
            labelText: "{categoryX}: {valueY}"
        })
    }));
    series.columns.template.set("strokeOpacity", 0);
    // Set up heat rules
    // https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
    series.set("heatRules", [{
        target: series.columns.template,
        key: "fill",
        min: am5.color(0x673AB7),
        max: am5.color(0xF44336),
        dataField: "valueY"
    }]);
    // Add scrollbars
    // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
    chart.set("scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));
    chart.set("scrollbarY", am5.Scrollbar.new(root, { orientation: "vertical" }));
    // Add year label
    var yearLabel = chart.radarContainer.children.push(am5.Label.new(root, {
        fontSize: "2em",
        text: currentYear.toString(),
        centerX: am5.p50,
        centerY: am5.p50,
        fill: am5.color(0x673AB7)
    }));
    // Generate and set data
    // https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
    var data = generateRadarData();
    series.data.setAll(data);
    categoryAxis.data.setAll(data);
    series.appear(1000);
    chart.appear(1000, 100);
    function generateRadarData() {
        var data = [];
        var i = 0;
        for (var continent in temperatures) {
            var continentData = temperatures[continent];
            continentData.forEach(function (country) {
                var rawDataItem = { "country": country[0] }
                for (var y = 2; y < country.length; y++) {
                    rawDataItem["value" + (startYear + y - 2)] = country[y];
                }
                data.push(rawDataItem);
            });
            createRange(continent, continentData, i);
            i++;
        }
        return data;
    }
    function createRange(name, continentData, index) {
        var axisRange = categoryAxis.createAxisRange(categoryAxis.makeDataItem({ above: true }));
        axisRange.get("label").setAll({ text: name });
        // first country
        axisRange.set("category", continentData[0][0]);
        // last country
        axisRange.set("endCategory", continentData[continentData.length - 1][0]);
        // every 3rd color for a bigger contrast
        var fill = axisRange.get("axisFill");
        fill.setAll({
            toggleKey: "active",
            cursorOverStyle: "pointer",
            fill: colorSet.getIndex(index * 3),
            visible: true,
            innerRadius: -25
        });
        axisRange.get("grid").set("visible", false);
        var label = axisRange.get("label");
        label.setAll({
            fill: am5.color(0xffffff),
            textType: "circular",
            radius: -16
        });
        fill.events.on("click", function (event) {
            var dataItem = event.target.dataItem;
            if (event.target.get("active")) {
                categoryAxis.zoom(0, 1);
            }
            else {
                categoryAxis.zoomToCategories(dataItem.get("category"), dataItem.get("endCategory"));
            }
        });
    }
    // Create controls
    var container = chart.children.push(am5.Container.new(root, {
        y: am5.percent(95),
        centerX: am5.p50,
        x: am5.p50,
        width: am5.percent(80),
        layout: root.horizontalLayout
    }));
    var playButton = container.children.push(am5.Button.new(root, {
        themeTags: ["play"],
        centerY: am5.p50,
        marginRight: 15,
        icon: am5.Graphics.new(root, {
            themeTags: ["icon"]
        })
    }));
    playButton.events.on("click", function () {
        if (playButton.get("active")) {
            slider.set("start", slider.get("start") + 0.0001);
        }
        else {
            slider.animate({
                key: "start",
                to: 1,
                duration: 15000 * (1 - slider.get("start"))
            });
        }
    })
    var slider = container.children.push(am5.Slider.new(root, {
        orientation: "horizontal",
        start: 0.5,
        centerY: am5.p50
    }));
    slider.on("start", function (start) {
        if (start === 1) {
            playButton.set("active", false);
        }
    });
    slider.events.on("rangechanged", function () {
        updateRadarData(startYear + Math.round(slider.get("start", 0) * (endYear - startYear)));
    });
    function updateRadarData(year) {
        if (currentYear != year) {
            currentYear = year;
            yearLabel.set("text", currentYear.toString());
            am5.array.each(series.dataItems, function (dataItem) {
                var newValue = dataItem.dataContext["value" + year];
                dataItem.set("valueY", newValue);
                dataItem.animate({ key: "valueYWorking", to: newValue, duration: 500 });
            });
        }
    }
}); // end am5.ready()
														
<div class="card card-bordered">
    <div class="card-body">
        <div id="kt_amcharts_4" style="height: 500px;"></div>
    </div>
</div>
<script src="https://cdn.amcharts.com/lib/4/plugins/timeline.js"></script>
<script src="https://cdn.amcharts.com/lib/4/plugins/bullets.js"></script>
														divwith a unique
										idin your HTML markup. Then initialize the chart via javascript.
am5.ready(function () {
    // Create root element
    // https://www.amcharts.com/docs/v5/getting-started/#Root_element
    var root = am5.Root.new("chartdiv");
    // Set themes
    // https://www.amcharts.com/docs/v5/concepts/themes/
    root.setThemes([
        am5themes_Animated.new(root)
    ]);
    // Create chart
    // https://www.amcharts.com/docs/v5/charts/radar-chart/
    var chart = root.container.children.push(am5radar.RadarChart.new(root, {
        panX: false,
        panY: false,
        wheelX: "panX",
        wheelY: "zoomX",
        innerRadius: am5.percent(20),
        startAngle: -90,
        endAngle: 180
    }));
    // Data
    var data = [{
        category: "Research",
        value: 80,
        full: 100,
        columnSettings: {
            fill: chart.get("colors").getIndex(0)
        }
    }, {
        category: "Marketing",
        value: 35,
        full: 100,
        columnSettings: {
            fill: chart.get("colors").getIndex(1)
        }
    }, {
        category: "Distribution",
        value: 92,
        full: 100,
        columnSettings: {
            fill: chart.get("colors").getIndex(2)
        }
    }, {
        category: "Human Resources",
        value: 68,
        full: 100,
        columnSettings: {
            fill: chart.get("colors").getIndex(3)
        }
    }];
    // Add cursor
    // https://www.amcharts.com/docs/v5/charts/radar-chart/#Cursor
    var cursor = chart.set("cursor", am5radar.RadarCursor.new(root, {
        behavior: "zoomX"
    }));
    cursor.lineY.set("visible", false);
    // Create axes and their renderers
    // https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
    var xRenderer = am5radar.AxisRendererCircular.new(root, {
        //minGridDistance: 50
    });
    xRenderer.labels.template.setAll({
        radius: 10
    });
    xRenderer.grid.template.setAll({
        forceHidden: true
    });
    var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
        renderer: xRenderer,
        min: 0,
        max: 100,
        strictMinMax: true,
        numberFormat: "#'%'",
        tooltip: am5.Tooltip.new(root, {})
    }));
    var yRenderer = am5radar.AxisRendererRadial.new(root, {
        minGridDistance: 20
    });
    yRenderer.labels.template.setAll({
        centerX: am5.p100,
        fontWeight: "500",
        fontSize: 18,
        templateField: "columnSettings"
    });
    yRenderer.grid.template.setAll({
        forceHidden: true
    });
    var yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
        categoryField: "category",
        renderer: yRenderer
    }));
    yAxis.data.setAll(data);
    // Create series
    // https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
    var series1 = chart.series.push(am5radar.RadarColumnSeries.new(root, {
        xAxis: xAxis,
        yAxis: yAxis,
        clustered: false,
        valueXField: "full",
        categoryYField: "category",
        fill: root.interfaceColors.get("alternativeBackground")
    }));
    series1.columns.template.setAll({
        width: am5.p100,
        fillOpacity: 0.08,
        strokeOpacity: 0,
        cornerRadius: 20
    });
    series1.data.setAll(data);
    var series2 = chart.series.push(am5radar.RadarColumnSeries.new(root, {
        xAxis: xAxis,
        yAxis: yAxis,
        clustered: false,
        valueXField: "value",
        categoryYField: "category"
    }));
    series2.columns.template.setAll({
        width: am5.p100,
        strokeOpacity: 0,
        tooltipText: "{category}: {valueX}%",
        cornerRadius: 20,
        templateField: "columnSettings"
    });
    series2.data.setAll(data);
    // Animate chart and series in
    // https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
    series1.appear(1000);
    series2.appear(1000);
    chart.appear(1000, 100);
}); // end am5.ready()
														
<div class="card card-bordered">
    <div class="card-body">
        <div id="kt_amcharts_5" style="height: 500px;"></div>
    </div>
</div>