# 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 `div`with a unique `id`in 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 `div`with a unique `id`in 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 `div`with a unique `id`in 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.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

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