File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div ref="StackedBarChart" style=" height: 500px;"></div>
</template>
<script>
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
export default {
name: "StackedBarChart",
mounted() {
this.createChart();
},
methods: {
createChart() {
// Initialize root
const root = am5.Root.new(this.$refs.StackedBarChart);
// Apply themes
const myTheme = am5.Theme.new(root);
myTheme.rule("Grid", ["base"]).setAll({
strokeOpacity: 0.1,
});
root.setThemes([
am5themes_Animated.new(root),
myTheme,
]);
// Create chart
const chart = root.container.children.push(
am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panY",
wheelY: "zoomY",
paddingLeft: 0,
layout: root.verticalLayout,
})
);
// Define data
const data = [
{ year: "2021", europe: 2.5, namerica: 2.5, asia: 2.1, lamerica: 1, meast: 0.8, africa: 0.4 },
];
// Create Y Axis
const yRenderer = am5xy.AxisRendererY.new(root, {});
const yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
categoryField: "year",
renderer: yRenderer,
tooltip: am5.Tooltip.new(root, {}),
}));
yRenderer.grid.template.setAll({
location: 1,
});
yAxis.data.setAll(data);
// Create X Axis
const xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
min: 0,
maxPrecision: 0,
renderer: am5xy.AxisRendererX.new(root, {
minGridDistance: 40,
strokeOpacity: 0.1,
}),
}));
// Create legend
const legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50,
}));
// Function to create series
const createSeries = (name, fieldName) => {
const series = chart.series.push(am5xy.ColumnSeries.new(root, {
name,
stacked: true,
xAxis,
yAxis,
baseAxis: yAxis,
valueXField: fieldName,
categoryYField: "year",
}));
series.columns.template.setAll({
tooltipText: "{name}, {categoryY}: {valueX}",
tooltipY: am5.percent(90),
});
series.data.setAll(data);
series.appear();
series.bullets.push(() =>
am5.Bullet.new(root, {
sprite: am5.Label.new(root, {
text: "{valueX}",
fill: root.interfaceColors.get("alternativeText"),
centerY: am5.p50,
centerX: am5.p50,
populateText: true,
}),
})
);
legend.data.push(series);
};
// Create series
createSeries("Europe", "europe");
createSeries("North America", "namerica");
createSeries("Asia", "asia");
createSeries("Latin America", "lamerica");
createSeries("Middle East", "meast");
createSeries("Africa", "africa");
// Chart animation
chart.appear(1000, 100);
},
},
};
</script>
<style scoped>
/* Add necessary styles here */
</style>