✨ 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.
Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications (SPAs). It was created by Evan You and is designed to be incrementally adoptable. The core library focuses on the view layer only, making it easy to pick up and integrate with other libraries or existing projects. Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. It has a virtual DOM for faster and more efficient manipulation, composable components, and a relatively low learning curve. It is great for ease-of-use, performance, and overall developer experience.
<!DOCTYPE html>
<html>
<head>
<title>amCharts Vue.js Code Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- amCharts 4 Core JS -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<!-- amCharts 4 Charts JS -->
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<!-- amCharts 4 Themes -->
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
</head>
<body>
<div id="app">
<h2>amCharts Vue.js Code Example</h2>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
</div>
<script>
new Vue({
el: '#app',
mounted() {
am4core.useTheme(am4themes_animated);
// Create chart instance
let chart = am4core.create("chartdiv", am4charts.PieChart);
// Add data
chart.data = [{
"category": "Category 1",
"value": 50
}, {
"category": "Category 2",
"value": 20
}, {
"category": "Category 3",
"value": 10
}, {
"category": "Category 4",
"value": 20
}];
// Add and configure Series
let pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "value";
pieSeries.dataFields.category = "category";
}
});
</script>
</body>
</html>
1. Vue.js and amCharts Libraries: The script tags include the Vue.js library and the necessary amCharts 4 files (core, charts, and animated theme).
2. HTML Structure: The `div` with an id `app` serves as the Vue application. Inside, there's a `h2` header for the title and a `div` with an id `chartdiv` where the amCharts chart will render.
3. Vue Instance: A new Vue instance is created targeting the `#app` element. The chart logic is placed inside the `mounted` lifecycle hook because we want to manipulate the DOM (specifically, to create a chart) after the Vue instance is mounted to the DOM.
4. Creating the Chart: Inside the `mounted` function, we first apply the animated theme to our chart. Then, we create a new pie chart instance, define its data, and configure its series to map the `value` and `category` from the data to the chart's slices.
By running this HTML file in a browser, you will see a pie chart rendered on the page, illustrating the basic integration of amCharts within a Vue.js application.
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.
