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
<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/themes/Animated.js"></script>

Basic Stock Chart

Simply define a blank 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_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: true,
        panY: false,
        wheelX: "panX",
        wheelY: "zoomX",
        layout: root.verticalLayout
    }));

    chart.get("colors").set("step", 2);


    // Create axes
    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
    // when axes are in opposite side, they should be added in reverse order
    var volumeAxisRenderer = am5xy.AxisRendererY.new(root, {
        opposite: true
    });
    volumeAxisRenderer.labels.template.setAll({
        centerY: am5.percent(100),
        maxPosition: 0.98
    });
    var volumeAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        renderer: volumeAxisRenderer,
        height: am5.percent(30),
        layer: 5
    }));
    volumeAxis.axisHeader.set("paddingTop", 10);
    volumeAxis.axisHeader.children.push(am5.Label.new(root, {
        text: "Volume",
        fontWeight: "bold",
        paddingTop: 5,
        paddingBottom: 5
    }));

    var valueAxisRenderer = am5xy.AxisRendererY.new(root, {
        opposite: true,
        pan: "zoom"
    });
    valueAxisRenderer.labels.template.setAll({
        centerY: am5.percent(100),
        maxPosition: 0.98
    });
    var valueAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        renderer: valueAxisRenderer,
        height: am5.percent(70),
        maxDeviation: 1
    }));
    valueAxis.axisHeader.children.push(am5.Label.new(root, {
        text: "Value",
        fontWeight: "bold",
        paddingBottom: 5,
        paddingTop: 5
    }));



    var dateAxisRenderer = am5xy.AxisRendererX.new(root, {
        pan: "zoom"
    });
    dateAxisRenderer.labels.template.setAll({
        minPosition: 0.01,
        maxPosition: 0.99
    });
    var dateAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
        groupData: true,
        maxDeviation: 0.5,
        baseInterval: {
            timeUnit: "day",
            count: 1
        },
        renderer: dateAxisRenderer
    }));
    dateAxis.set("tooltip", am5.Tooltip.new(root, {}));


    // Add series
    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
    var valueSeries1 = chart.series.push(am5xy.LineSeries.new(root, {
        name: "XTD",
        valueYField: "price1",
        calculateAggregates: true,
        valueXField: "date",
        xAxis: dateAxis,
        yAxis: valueAxis,
        legendValueText: "{valueY}"
    }));

    var valueTooltip = valueSeries1.set("tooltip", am5.Tooltip.new(root, {
        getFillFromSprite: false,
        getStrokeFromSprite: true,
        getLabelFillFromSprite: true,
        autoTextColor: false,
        pointerOrientation: "horizontal",
        labelText: "{name}: {valueY} {valueYChangePercent.formatNumber('[#00ff00]+#,###.##|[#ff0000]#,###.##|[#999999]0')}%"
    }));
    valueTooltip.get("background").set("fill", root.interfaceColors.get("background"));

    var firstColor = chart.get("colors").getIndex(0);
    var volumeSeries = chart.series.push(am5xy.ColumnSeries.new(root, {
        name: "XTD",
        fill: firstColor,
        stroke: firstColor,
        valueYField: "quantity",
        valueXField: "date",
        valueYGrouped: "sum",
        xAxis: dateAxis,
        yAxis: volumeAxis,
        legendValueText: "{valueY}",
        tooltip: am5.Tooltip.new(root, {
            labelText: "{valueY}"
        })
    }));
    volumeSeries.columns.template.setAll({
        strokeWidth: 0.2,
        strokeOpacity: 1,
        stroke: am5.color(0xffffff)
    });


    // Add legend to axis header
    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/axis-headers/
    // https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
    var valueLegend = valueAxis.axisHeader.children.push(
        am5.Legend.new(root, {
            useDefaultMarker: true
        })
    );
    valueLegend.data.setAll([valueSeries1]);

    var volumeLegend = volumeAxis.axisHeader.children.push(
        am5.Legend.new(root, {
            useDefaultMarker: true
        })
    );
    volumeLegend.data.setAll([volumeSeries]);


    // Stack axes vertically
    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/#Stacked_axes
    chart.rightAxesContainer.set("layout", root.verticalLayout);


    // Add cursor
    // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
    chart.set("cursor", am5xy.XYCursor.new(root, {}))


    // Add scrollbar
    // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
    var scrollbar = chart.set("scrollbarX", am5xy.XYChartScrollbar.new(root, {
        orientation: "horizontal",
        height: 50
    }));

    var sbDateAxis = scrollbar.chart.xAxes.push(am5xy.DateAxis.new(root, {
        groupData: true,
        groupIntervals: [{
            timeUnit: "week",
            count: 1
        }],
        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: "price1",
        valueXField: "date",
        xAxis: sbDateAxis,
        yAxis: sbValueAxis
    }));

    sbSeries.fills.template.setAll({
        visible: true,
        fillOpacity: 0.3
    });


    // Generate random data and set on series
    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Setting_data
    var data = [];
    var price1 = 1000;
    var quantity = 10000;

    for (var i = 1; i < 5000; i++) {
        price1 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 20);

        if (price1 < 100) {
            price1 = 100;
        }

        quantity += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 500);

        if (quantity < 0) {
            quantity *= -1;
        }
        data.push({
            date: new Date(2010, 0, i).getTime(),
            price1: price1,
            quantity: quantity
        });
    }

    valueSeries1.data.setAll(data);
    volumeSeries.data.setAll(data);
    sbSeries.data.setAll(data);


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

<script src="https://cdn.amcharts.com/lib/4/plugins/rangeSelector.js"></script>

Stock Comparison Chart

Simply define a blank 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_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: false,
        wheelX: "panX",
        wheelY: "zoomX",
        layout: root.verticalLayout
    }));

    chart.get("colors").set("step", 2);


    // Create axes
    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/

    // Y axis #1
    var valueAxisRenderer = am5xy.AxisRendererY.new(root, {
        opposite: true,
        pan: "zoom"
    });

    valueAxisRenderer.labels.template.setAll({
        centerY: am5.percent(100),
        maxPosition: 0.98
    });

    var valueAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        renderer: valueAxisRenderer,
        maxDeviation: 1,
        extraMin: 0.2 // gives some extra space
    }));

    // Y axis #2
    var volumeAxisRenderer = am5xy.AxisRendererY.new(root, {
        opposite: true
    });

    volumeAxisRenderer.labels.template.setAll({
        forceHidden: true
    });

    volumeAxisRenderer.grid.template.setAll({
        forceHidden: true
    });

    var volumeAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        renderer: volumeAxisRenderer,
        height: am5.percent(25),
        layer: 5,
        centerY: am5.p100,
        y: am5.p100
    }));

    volumeAxis.axisHeader.set("paddingTop", 10);


    // X axis
    var dateAxisRenderer = am5xy.AxisRendererX.new(root, {});

    dateAxisRenderer.labels.template.setAll({
        minPosition: 0.01,
        maxPosition: 0.99
    });

    var dateAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
        groupData: true,
        baseInterval: {
            timeUnit: "day",
            count: 1
        },
        renderer: dateAxisRenderer
    }));

    dateAxis.set("tooltip", am5.Tooltip.new(root, {
        themeTags: ["axis"]
    }));


    // Add series
    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
    var valueSeries1 = chart.series.push(am5xy.LineSeries.new(root, {
        name: "XTD",
        valueYField: "price1",
        calculateAggregates: true,
        valueYShow: "valueYChangeSelectionPercent",
        valueXField: "date",
        xAxis: dateAxis,
        yAxis: valueAxis,
        legendValueText: "{valueY}"
    }));

    var valueSeries2 = chart.series.push(am5xy.LineSeries.new(root, {
        name: "BTD",
        valueYField: "price2",
        calculateAggregates: true,
        valueYShow: "valueYChangeSelectionPercent",
        valueXField: "date",
        xAxis: dateAxis,
        yAxis: valueAxis,
        legendValueText: "{valueY}"
    }));


    // Add series tooltips
    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Tooltips
    var valueTooltip = valueSeries1.set("tooltip", am5.Tooltip.new(root, {
        getFillFromSprite: false,
        getStrokeFromSprite: true,
        getLabelFillFromSprite: true,
        autoTextColor: false,
        pointerOrientation: "horizontal",
        labelText: "{name}: {valueY} {valueYChangePercent.formatNumber('[#00ff00]+#,###.##|[#ff0000]#,###.##|[#999999]0')}%"
    }));
    valueTooltip.get("background").set("fill", root.interfaceColors.get("background"));

    var valueTooltip2 = valueSeries2.set("tooltip", am5.Tooltip.new(root, {
        getFillFromSprite: false,
        getStrokeFromSprite: true,
        getLabelFillFromSprite: true,
        autoTextColor: false,
        pointerOrientation: "horizontal",
        labelText: "{name}: {valueY} {valueYChangePercent.formatNumber('[#00ff00]+#,###.##|[#ff0000]#,###.##|[#999999]0')}%"
    }));
    valueTooltip2.get("background").set("fill", root.interfaceColors.get("background"));

    var firstColor = chart.get("colors").getIndex(0);
    var volumeSeries = chart.series.push(am5xy.ColumnSeries.new(root, {
        name: "XTD",
        fill: firstColor,
        stroke: firstColor,
        valueYField: "quantity",
        valueXField: "date",
        valueYGrouped: "sum",
        xAxis: dateAxis,
        yAxis: volumeAxis,
        legendValueText: "{valueY}",
        tooltip: am5.Tooltip.new(root, {
            labelText: "{valueY}"
        })
    }));
    volumeSeries.columns.template.setAll({
        width: am5.percent(40),
        strokeWidth: 0.2,
        strokeOpacity: 1,
        stroke: am5.color(0xffffff)
    });


    // Add legend to axis header
    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/axis-headers/
    // https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
    var legend = chart.plotContainer.children.push(am5.Legend.new(root, {
        useDefaultMarker: true
    }));
    legend.data.setAll([valueSeries1, valueSeries2]);


    // Add cursor
    // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
    chart.set("cursor", am5xy.XYCursor.new(root, {}))


    // Add scrollbar
    // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
    var scrollbar = chart.set("scrollbarX", am5xy.XYChartScrollbar.new(root, {
        orientation: "horizontal",
        height: 50
    }));

    var sbDateAxis = scrollbar.chart.xAxes.push(am5xy.DateAxis.new(root, {
        groupData: true,
        groupIntervals: [{
            timeUnit: "week",
            count: 1
        }],
        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: "price1",
        valueXField: "date",
        xAxis: sbDateAxis,
        yAxis: sbValueAxis
    }));

    sbSeries.fills.template.setAll({
        visible: true,
        fillOpacity: 0.3
    });


    // Generate random data and set on series
    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Setting_data
    var data = [];
    var price1 = 1000;
    var price2 = 2000;
    var quantity = 10000;

    for (var i = 1; i < 5000; i++) {
        price1 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 20);
        price2 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 20);

        if (price1 < 100) {
            price1 = 100;
        }

        if (price2 < 100) {
            price2 = 100;
        }

        quantity += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 500);

        if (quantity < 0) {
            quantity *= -1;
        }
        data.push({
            date: new Date(2010, 0, i).getTime(),
            price1: price1,
            price2: price2,
            quantity: quantity
        });
    }

    valueSeries1.data.setAll(data);
    valueSeries2.data.setAll(data);

    volumeSeries.data.setAll(data);
    sbSeries.data.setAll(data);


    // 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_2" style="height: 500px;"></div>
    </div>
</div>

<script src="https://cdn.amcharts.com/lib/4/plugins/rangeSelector.js"></script>

Candlesticks Chart

Simply define a blank 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_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/xy-chart/
    var chart = root.container.children.push(am5xy.XYChart.new(root, {
        panX: true,
        panY: false,
        wheelX: "panX",
        wheelY: "zoomX",
        layout: root.verticalLayout
    }));

    chart.get("colors").set("step", 2);


    // Create axes
    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
    var valueAxisRenderer = am5xy.AxisRendererY.new(root, {
        inside: true
    });
    valueAxisRenderer.labels.template.setAll({
        centerY: am5.percent(100),
        maxPosition: 0.98
    });
    var valueAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        renderer: valueAxisRenderer,
        height: am5.percent(70)
    }));
    valueAxis.axisHeader.children.push(am5.Label.new(root, {
        text: "Value",
        fontWeight: "bold",
        paddingBottom: 5,
        paddingTop: 5
    }));

    var volumeAxisRenderer = am5xy.AxisRendererY.new(root, {
        inside: true
    });
    volumeAxisRenderer.labels.template.setAll({
        centerY: am5.percent(100),
        maxPosition: 0.98
    });
    var volumeAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        renderer: volumeAxisRenderer,
        height: am5.percent(30),
        layer: 5,
        numberFormat: "#a"
    }));
    volumeAxis.axisHeader.set("paddingTop", 10);
    volumeAxis.axisHeader.children.push(am5.Label.new(root, {
        text: "Volume",
        fontWeight: "bold",
        paddingTop: 5,
        paddingBottom: 5
    }));


    var dateAxisRenderer = am5xy.AxisRendererX.new(root, {});
    dateAxisRenderer.labels.template.setAll({
        minPosition: 0.01,
        maxPosition: 0.99,
        minGridDistance: 40
    });
    var dateAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
        groupData: true,
        //groupCount: 20,
        baseInterval: { timeUnit: "day", count: 1 },
        renderer: dateAxisRenderer
    }));
    dateAxis.set("tooltip", am5.Tooltip.new(root, {}));

    var color = root.interfaceColors.get("background");

    // Add series
    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
    var valueSeries = chart.series.push(
        am5xy.CandlestickSeries.new(root, {
            fill: color,
            clustered: false,
            calculateAggregates: true,
            stroke: color,
            name: "MSFT",
            xAxis: dateAxis,
            yAxis: valueAxis,
            valueYField: "Close",
            openValueYField: "Open",
            lowValueYField: "Low",
            highValueYField: "High",
            valueXField: "Date",
            lowValueYGrouped: "low",
            highValueYGrouped: "high",
            openValueYGrouped: "open",
            valueYGrouped: "close",
            legendValueText: "open: {openValueY} low: {lowValueY} high: {highValueY} close: {valueY}",
            legendRangeValueText: "{valueYClose}"
        })
    );

    var valueTooltip = valueSeries.set("tooltip", am5.Tooltip.new(root, {
        getFillFromSprite: false,
        getStrokeFromSprite: true,
        getLabelFillFromSprite: true,
        autoTextColor: false,
        pointerOrientation: "horizontal",
        labelText: "{name}: {valueY} {valueYChangePreviousPercent.formatNumber('[#00ff00]+#,###.##|[#ff0000]#,###.##|[#999999]0')}%"
    }));
    valueTooltip.get("background").set("fill", root.interfaceColors.get("background"));


    var firstColor = chart.get("colors").getIndex(0);
    var volumeSeries = chart.series.push(am5xy.ColumnSeries.new(root, {
        name: "MSFT",
        clustered: false,
        fill: firstColor,
        stroke: firstColor,
        valueYField: "Volume",
        valueXField: "Date",
        valueYGrouped: "sum",
        xAxis: dateAxis,
        yAxis: volumeAxis,
        legendValueText: "{valueY}",
        tooltip: am5.Tooltip.new(root, {
            labelText: "{valueY}"
        })
    }));

    volumeSeries.columns.template.setAll({
        //strokeWidth: 0.5,
        //strokeOpacity: 1,
        //stroke: am5.color(0xffffff)
    });


    // Add legend to axis header
    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/axis-headers/
    // https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
    var valueLegend = valueAxis.axisHeader.children.push(
        am5.Legend.new(root, {
            useDefaultMarker: true
        })
    );
    valueLegend.data.setAll([valueSeries]);

    var volumeLegend = volumeAxis.axisHeader.children.push(
        am5.Legend.new(root, {
            useDefaultMarker: true
        })
    );
    volumeLegend.data.setAll([volumeSeries]);


    // Stack axes vertically
    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/#Stacked_axes
    chart.leftAxesContainer.set("layout", root.verticalLayout);


    // Add cursor
    // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
    chart.set("cursor", am5xy.XYCursor.new(root, {}))


    // Add scrollbar
    // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
    var scrollbar = chart.set("scrollbarX", am5xy.XYChartScrollbar.new(root, {
        orientation: "horizontal",
        height: 50
    }));

    var sbDateAxis = scrollbar.chart.xAxes.push(am5xy.DateAxis.new(root, {
        groupData: true,
        groupIntervals: [{
            timeUnit: "week",
            count: 1
        }],
        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: "Adj Close",
        valueXField: "Date",
        xAxis: sbDateAxis,
        yAxis: sbValueAxis
    }));

    sbSeries.fills.template.setAll({
        visible: true,
        fillOpacity: 0.3
    });


    // Load external data
    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Setting_data
    am5.net.load("https://www.amcharts.com/wp-content/uploads/assets/stock/MSFT.csv").then(function (result) {

        // Parse loaded data
        var data = am5.CSVParser.parse(result.response, {
            delimiter: ",",
            reverse: true,
            skipEmpty: true,
            useColumnNames: true
        });

        // Process data (convert dates and values)
        var processor = am5.DataProcessor.new(root, {
            dateFields: ["Date"],
            dateFormat: "yyyy-MM-dd",
            numericFields: ["Open", "High", "Low", "Close", "Adj Close", "Volume"]
        });
        processor.processMany(data);

        console.log(data)

        // Set data
        valueSeries.data.setAll(data);
        volumeSeries.data.setAll(data);
        sbSeries.data.setAll(data);
    });



    // 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_3" style="height: 500px;"></div>
    </div>
</div>

Explore

Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Buy Now
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now