Documentation v8.2.7

Downloads Preview

Overview

AmCharts is 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.

Usage

To use AmCharts in 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.

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

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

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

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.2.7

Overview

Usage

Basic Stock Chart

Stock Comparison Chart

Candlesticks Chart

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.2.7

No result found

Overview

Usage

Basic Stock Chart

Stock Comparison Chart

Candlesticks Chart