How to install amCharts

Created Mar 25, 2021 at 17:06

amCharts was written in TypeScript, it can be used in any JavaScript-compatible environment - TypeScript applications, React or Angular2+ apps, and even plain old JavaScript.

When used in a TypeScript application, amCharts 4 requires TypeScript 2.9 or later. Using any older version will result in error.

Actual geographical data for the maps is contained in a separate package @amcharts/amcharts4-geodata. So, if you're building maps, you will need to import/add that package as well.

You can download the latest version of amCharts from the GitHub releases or use a amCharts CDN.

You can clone a repository from GitHub.com to your local computer.

Cloning with HTTPS URLs

git clone https://github.com/amcharts/amcharts4.git

Cloning with SSH URLs

git clone [email protected]:amcharts/amcharts4.git

Cloning with GitHub CLI

gh repo clone amcharts/amcharts4

Run the following command to locally install the package and its dependencies with NPM.

Downloading and installing packages locally

npm i @amcharts/amcharts4

npm install @amcharts/amcharts4

yarn add @amcharts/amcharts4

Downloading and installing packages globally

npm i -g @amcharts/amcharts4

yarn global add @amcharts/amcharts4

Install Specific Version of a Package

npm install @amcharts/[email protected]

yarn add @amcharts/[email protected]

Bower

bower install @amcharts/amcharts4

Example

Creating a chart: - A chart instance in V4 is instantiated using helper function create(), which is available in the am4core object.

// Import stuff
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";

// Create chart instance
let chart = am4core.create("chartdiv", am4charts.PieChart);

// Create pie series
let series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = "litres";
series.dataFields.category = "country";

// Add data
chart.data = [{
  "country": "Lithuania",
  "litres": 501.9
}, {
  "country": "Czech Republic",
  "litres": 301.9
}, {
  "country": "Ireland",
  "litres": 201.1
}, {
  "country": "Germany",
  "litres": 165.8
}, {
  "country": "Australia",
  "litres": 139.9
}, {
  "country": "Austria",
  "litres": 128.3
}, {
  "country": "UK",
  "litres": 99
}, {
  "country": "Belgium",
  "litres": 60
}, {
  "country": "The Netherlands",
  "litres": 50
}];

// And, for a good measure, let's add a legend
chart.legend = new am4charts.Legend();