✨ Try our new interactive demo
amCharts has a wide varity of charts and maps and is a great choice as a charting library. It is highly customizable and responsive. The primary concerns with amCharts are around its cost for commercial use and the size/load time for the underlying package.
Javascript is the base language by which people build charts and websites for the web. There are many additional frameworks that are built on top of Javascript. Learning Javascript is an absolute must for modern web development, particularly when it comes to using a charting library.
amCharts is a comprehensive chart library that allows you to create interactive and versatile charts within your web projects. Below is a simple example demonstrating how to integrate an amCharts pie chart into your web page using basic HTML and JavaScript.
First, define the container where the chart will be rendered:
<!DOCTYPE html>
<html>
<head>
<title>amCharts Example</title>
<link rel="stylesheet" href="https://cdn.amcharts.com/lib/4/core.css">
<link rel="stylesheet" href="https://cdn.amcharts.com/lib/4/charts.css">
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 500px;"></div>
<script src="chart.js"></script>
</body>
</html>
Next, with the help of JavaScript, you will initialize the chart and populate it with data. Save this code in a file named chart.js:
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.PieChart);
// Add data
chart.data = [{
"category": "Category A",
"value": 40
}, {
"category": "Category B",
"value": 30
}, {
"category": "Category C",
"value": 20
}, {
"category": "Category D",
"value": 10
}];
// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "value";
pieSeries.dataFields.category = "category";
This simple example initiates a pie chart, assigns it data, and configures it to display the data categories and their respective values. The am4core.create function targets the chartdiv element as the chart container. We then push a new PieSeries into the chart's series collection, mapping the category and value fields from the data object to the chart.
By adding the amCharts library links in the HTML head and implementing the chart instantiation code in a separate JavaScript file, you create a clean and organized codebase. In this example, the pie chart visualizes the distribution of categories A through D with their corresponding data values, showcasing a simple yet powerful use case of the amCharts library.
Looking for the fastest, easiest way to make responsive next-level charts on your website? Reach out to Explo, the market leader in creating responsive charts. With Explo's Report Builder and Editable Sections offerings, you can easily drag-and-drop charts and custom reporting in a matter of minutes, all with just SQL and no-code tools. No need to learn and configure charts, use our highly customizable solution instead.
