Documentation v8.0.38

Preview Downloads Purchase

Overview

AmChartsis programming library for all your data visualization needs. You can download and use it for free. The only limitation of the free version is that a small link to this web site will be displayed in the top left corner of your charts. If you would like to use charts without this link, or you appreciate the software and would like to support its creators, please purchase a commercial license. For more info please check AmCharts Home.

Exclusively for Keenthemes users

After purchasing Metronic you will get a promo code for 15% discountoff the commercial license of AmChart. To find the promo code please check the README file in the purchased package.

Usage

To use AmChartsin your page you will need to include. Please note that some plugins below are optional. For example, if your project does not require AmChart 5's radar plugin, you do not need to include it.

<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>

Bar Chart

Simply define a blank 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.

JAVASCRIPT
HTML

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>

Line Chart

Simply define a blank divwith a unique idin your HTML markup. Then initialize the chart via javascript. This demo shows comparison of two line series from different periods.

JAVASCRIPT
HTML

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>

Pie Chart

Simply define a blank 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.

JAVASCRIPT
HTML

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>

Radar Timeline Chart

Simply define a blank divwith a unique idin your HTML markup. Then initialize the chart via javascript.

JAVASCRIPT
HTML

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>

Solid Gauge Chart

Simply define a blank divwith a unique idin your HTML markup. Then initialize the chart via javascript.

JAVASCRIPT
HTML

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>

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.0.38

Overview

Usage

Bar Chart

Line Chart

Pie Chart

Radar Timeline Chart

Solid Gauge Chart

Explore

Metronic Licenses

Metronic Demos

Learn & Get Inspired

Support at devs.keenthemes.com

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.0.38

No result found

Overview

Usage

Bar Chart

Line Chart

Pie Chart

Radar Timeline Chart

Solid Gauge Chart

Explore

Metronic Licenses

Metronic Demos

Learn & Get Inspired

Support at devs.keenthemes.com