Flexmonster Pivot Table & Charts easily integrates with amCharts — a JavaScript library for interactive data visualization with a great choice of interactive charts.
This React dashboard example is built on some Kaggle data about the cheese industry.
Play with the demo on a larger screen: save this link for later or watch the video review now.
With our specially written Connector for amCharts, your visualizations will become even more interactive: just change the slice on the pivot table or filter the data, and see your charts immediately transform!
Creating React dashboards with amCharts and the Flexmonster pivot table is easy and engaging: choose from a wide range of modern and bright charts and present your data most favourably.
Icons made by Freepik from www.flaticon.com
Configure the React pivot grid with the data you need and instantly submit all the information to interactive charts: you will quickly identify all extremes and detect crucial points.
import { useRef, useEffect } from "react";
import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/lib/flexmonster.amcharts.js";
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import * as am5percent from "@amcharts/amcharts5/percent";
import * as am5map from "@amcharts/amcharts5/map";
import am5geodata_worldHigh from "@amcharts/amcharts5-geodata/worldHigh";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
import am5themes_Responsive from "@amcharts/amcharts5/themes/Responsive";
function PivotTableDemo() {
const pivotRef = useRef(null);
let stackedChartRoot;
let pictorialChartRoot;
let pieChartRoot;
let mapChartRoot;
const chartColors = [
am5.color("#4CBF8B"),
am5.color("#FFCD4C"),
am5.color("#E8734C"),
am5.color("#9875E3"),
am5.color("#4C9EFF"),
am5.color("#8ACFC3"),
am5.color("#CD97E6"),
am5.color("#F1D34C"),
am5.color("#65D2E7")
];
const cheeseColors = [
am5.color("#FFE268"),
am5.color("#FFCD4C"),
am5.color("#FFB037")
];
const report = {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/demos/amcharts-demo-data.json",
mapping: {
"Date": {
type: "date"
},
"Country": {
type: "string"
},
"id": {
type: "string"
},
"CountryCode": {
type: "property",
hierarchy: "Country"
},
"Feta": {
type: "number"
},
"Mozzarella": {
type: "number"
},
"Parmigiano-Reggiano": {
type: "number"
}
}
},
slice: {
rows: [
{
uniqueName: "Date.Month",
filter: {
exclude: [
"date.month.[december]",
"date.month.[november]",
"date.month.[october]"
]
}
},
{
uniqueName: "[Measures]"
}
],
columns: [
{
uniqueName: "Country"
}
],
measures: [
{
uniqueName: "Feta",
aggregation: "sum"
},
{
uniqueName: "Mozzarella",
aggregation: "sum"
},
{
uniqueName: "Parmigiano-Reggiano",
aggregation: "sum"
}
]
},
options: {
grid: {
showHeaders: false,
showGrandTotals: "rows"
},
showAggregationLabels: false
}
};
const reportComplete = () => {
pivotRef.current.flexmonster.off("reportcomplete");
createStackedChart();
createPictorialChart();
createPieChart();
createMapChart();
};
const createStackedChart = () => {
pivotRef.current.flexmonster.amcharts.getData(
{},
drawStackedChart,
updateStackedChart
);
};
const drawStackedChart = (chartData, rawData) => {
stackedChartRoot = am5.Root.new("amcharts-stacked-container");
// Set themes
stackedChartRoot.setThemes([am5themes_Animated.new(stackedChartRoot)]);
const stackedChart = stackedChartRoot.container.children.push(
am5xy.XYChart.new(stackedChartRoot, {})
);
stackedChart.get("colors").set("colors", chartColors);
// Create Y-axis
const valueAxis = stackedChart.yAxes.push(
am5xy.ValueAxis.new(stackedChartRoot, {
renderer: am5xy.AxisRendererY.new(stackedChartRoot, {}),
tooltip: am5.Tooltip.new(stackedChartRoot, {
truncate: true,
maxWidth: 200,
tooltipText: "{category}"
})
})
);
valueAxis.children.unshift(
am5.Label.new(stackedChartRoot, {
rotation: -90,
text: "Queries",
y: am5.p50,
centerX: am5.p50
})
);
// Create X-axis
const categoryAxis = stackedChart.xAxes.push(
am5xy.CategoryAxis.new(stackedChartRoot, {
renderer: am5xy.AxisRendererX.new(stackedChartRoot, {
minGridDistance: 20
}),
categoryField: pivotRef.current.flexmonster.amcharts.getCategoryName(rawData),
tooltip: am5.Tooltip.new(stackedChartRoot, {
truncate: true,
maxWidth: 200,
tooltipText: "{category}"
})
})
);
// Get xRenderer for axis configurations
const xRenderer = categoryAxis.get("renderer");
xRenderer.grid.template.setAll({
location: 0
});
const maxWidth = 200;
xRenderer.labels.template.setAll({
truncate: true,
maxWidth: maxWidth,
tooltipText: "{category}"
});
categoryAxis.events.on("boundschanged", function (ev) {
const axis = ev.target;
const cellWidth = axis.innerWidth() / (axis.getPrivate("endIndex") - axis.getPrivate("startIndex"));
if (cellWidth < maxWidth) {
xRenderer.labels.template.setAll({
rotation: -45,
horizontalCenter: "right",
verticalCenter: "middle"
});
} else {
xRenderer.labels.template.setAll({
rotation: 0,
horizontalCenter: "middle",
verticalCenter: "top"
});
}
});
categoryAxis.data.setAll(chartData.data);
for (let i = 0; i < pivotRef.current.flexmonster.amcharts.getNumberOfMeasures(rawData); i++) {
// Create series
const series = stackedChart.series.push(
am5xy.ColumnSeries.new(stackedChartRoot, {
xAxis: categoryAxis,
yAxis: valueAxis,
categoryXField: pivotRef.current.flexmonster.amcharts.getCategoryName(rawData),
valueYField: pivotRef.current.flexmonster.amcharts.getMeasureNameByIndex(rawData, i),
name: pivotRef.current.flexmonster.amcharts.getMeasureNameByIndex(rawData, i).split(" ").pop(),
stacked: true
})
);
series.columns.template.setAll({
tooltipText: "{name}, {categoryX}: {valueY}"
});
series.data.setAll(chartData.data);
}
stackedChart.set("cursor", am5xy.XYCursor.new(stackedChartRoot, {}));
};
const updateStackedChart = (chartData, rawData) => {
stackedChartRoot?.dispose();
drawStackedChart(chartData, rawData);
};
const createPictorialChart = () => {
pivotRef.current.flexmonster.amcharts.getData(
{
slice: {
rows: [
{
uniqueName: "Country"
},
{
uniqueName: "[Measures]"
}
],
measures: [
{
uniqueName: "Feta",
aggregation: "sum"
}
]
}
},
drawPictorialChart,
updatePictorialChart
);
};
const drawPictorialChart = (chartData, rawData) => {
const iconPathValue = window.iconPath();
pictorialChartRoot = am5.Root.new("amcharts-pictorial-container");
// Set themes
pictorialChartRoot.setThemes([am5themes_Animated.new(pictorialChartRoot)]);
const pictorialChart = pictorialChartRoot.container.children.push(
am5percent.SlicedChart.new(pictorialChartRoot, {
layout: pictorialChartRoot.horizontalLayout
})
);
// Create series
const series = pictorialChart.series.push(
am5percent.PictorialStackedSeries.new(pictorialChartRoot, {
name: "Series",
valueField: pivotRef.current.flexmonster.amcharts.getMeasureNameByIndex(rawData, 0),
orientation: "horizontal",
categoryField: pivotRef.current.flexmonster.amcharts.getCategoryName(rawData),
svgPath: iconPathValue,
maxWidth: 500,
centerX: am5.percent(50),
x: am5.percent(50)
})
);
series.ticks.template.set("visible", false);
series.labels.template.set("visible", false);
series.get("colors").set("colors", cheeseColors);
series.data.setAll(chartData.data);
// Create legend
const legend = pictorialChart.children.push(
am5.Legend.new(pictorialChartRoot, {
centerY: am5.percent(50),
y: am5.percent(50),
layout: pictorialChartRoot.verticalLayout,
clickTarget: "none"
})
);
legend.markerRectangles.template.setAll({
cornerRadiusTL: 10,
cornerRadiusTR: 10,
cornerRadiusBL: 10,
cornerRadiusBR: 10
});
legend.data.setAll(series.dataItems);
};
const updatePictorialChart = (chartData, rawData) => {
// Here you can add your own logic for updating the chart
};
const createPieChart = () => {
pivotRef.current.flexmonster.amcharts.getData(
{
slice: {
rows: [
{
uniqueName: "Date.Month",
filter: {
members: [
"date.month.[january]",
"date.month.[february]",
"date.month.[march]",
"date.month.[april]",
"date.month.[may]",
"date.month.[june]"
]
}
}
],
measures: [
{
uniqueName: "Feta",
aggregation: "sum"
}
]
}
},
drawPieChart,
updatePieChart
);
};
const drawPieChart = (chartData, rawData) => {
pieChartRoot = am5.Root.new("amcharts-pie-container");
// Set themes
pieChartRoot.setThemes([am5themes_Animated.new(pieChartRoot)]);
const pieChart = pieChartRoot.container.children.push(
am5percent.PieChart.new(pieChartRoot, {
numberFormatter: am5.NumberFormatter.new(pieChartRoot, {
numberFormat: pivotRef.current.flexmonster.amcharts.getNumberFormatPattern(rawData.meta.formats[0])
})
})
);
// Create pie series
const series = pieChart.series.push(
am5percent.PieSeries.new(pieChartRoot, {
name: "Series",
y: am5.percent(-10),
valueField: pivotRef.current.flexmonster.amcharts.getMeasureNameByIndex(rawData, 0),
categoryField: pivotRef.current.flexmonster.amcharts.getCategoryName(rawData),
alignLabels: true
})
);
series.labels.template.set("text", "{category}: {value}");
series.slices.template.adapters.add("radius", function (radius, target) {
const dataItem = target.dataItem;
const high = series.getPrivate("valueHigh");
if (dataItem) {
const value = target.dataItem.get("valueWorking", 0);
return (radius * value) / high;
}
return radius;
});
series.get("colors").set("colors", chartColors);
series.slices.template.setAll({
cornerRadius: 6,
stroke: am5.color("#fff"),
strokeWidth: 2,
strokeOpacity: 1
});
series.data.setAll(chartData.data);
// Create legend
const legend = pieChart.children.push(
am5.Legend.new(pieChartRoot, {
centerX: am5.percent(50),
x: am5.percent(50),
y: am5.percent(95),
centerY: am5.percent(100)
})
);
const responsive = am5themes_Responsive.new(pieChartRoot);
responsive.addRule({
name: "Series",
relevant: function (width, height) {
return width <= 600;
},
applying: () => {
series.ticks.template.set("visible", false);
series.labels.template.set("visible", false);
},
removing: () => {
series.ticks.template.set("visible", true);
series.labels.template.set("visible", true);
}
});
pieChartRoot.setThemes([responsive]);
legend.data.setAll(series.dataItems);
};
const updatePieChart = (chartData, rawData) => {
// Here you can add your own logic for updating the chart
};
const createMapChart = () => {
pivotRef.current.flexmonster.amcharts.getData(
{
slice: {
rows: [
{
uniqueName: "id"
}
],
columns: [
{
uniqueName: "[Measures]"
}
],
measures: [
{
uniqueName: "Feta",
aggregation: "sum"
}
]
}
},
drawMapChart,
updateMapChart
);
};
const drawMapChart = (chartData, rawData) => {
mapChartRoot = am5.Root.new("amcharts-map-container");
// Set themes
mapChartRoot.setThemes([am5themes_Animated.new(mapChartRoot)]);
const mapChart = mapChartRoot.container.children.push(
am5map.MapChart.new(mapChartRoot, {
panX: "rotateX",
panY: "none",
valueField: pivotRef.current.flexmonster.amcharts.getMeasureNameByIndex(rawData, 0),
homeZoomLevel: 9,
maxZoomLevel: 9,
minZoomLevel: 9,
wheelY: "none",
homeGeoPoint: {
longitude: 12.496366,
latitude: 42.399982
}
})
);
// Create polygon series
const polygonSeries = mapChart.series.push(
am5map.MapPolygonSeries.new(mapChartRoot, {
geoJSON: am5geodata_worldHigh,
valueField: pivotRef.current.flexmonster.amcharts.getMeasureNameByIndex(rawData, 0),
calculateAggregates: true,
exclude: ["AQ"]
})
);
polygonSeries.mapPolygons.template.setAll({
tooltipText: "{name} {value}",
fill: am5.color("#D3D3D3")
});
polygonSeries.mapPolygons.template.events.on("pointerover", function (ev) {
heatLegend.showValue(ev.target.dataItem.get("value"));
});
polygonSeries.events.on("datavalidated", () => {
mapChart.goHome();
});
polygonSeries.set("heatRules", [
{
target: polygonSeries.mapPolygons.template,
dataField: "value",
min: am5.color("#F1D34C"),
max: am5.color("#4CBF8B"),
key: "fill"
}
]);
polygonSeries.data.setAll(chartData.data);
// Create heat legend
const heatLegend = mapChart.children.push(
am5.HeatLegend.new(mapChartRoot, {
target: polygonSeries.mapPolygons.template,
orientation: "horizontal",
width: am5.percent(100),
y: am5.percent(100),
centerY: am5.percent(100),
startColor: am5.color("#F1D34C"),
endColor: am5.color("#4CBF8B"),
paddingBottom: 20,
paddingTop: 20,
paddingLeft: 20,
paddingRight: 20
})
);
polygonSeries.events.on("datavalidated", function () {
heatLegend.set("startValue", polygonSeries.getPrivate("valueLow"));
heatLegend.set("endValue", polygonSeries.getPrivate("valueHigh"));
});
};
const updateMapChart = (chartData, rawData) => {
// Here you can add your own logic for updating the chart
};
const customizeCell = (cell, data) => {
if (data.type === "header" && data.hierarchy?.caption === "Country" && data.member?.properties) {
const name = data.member.properties.CountryCode;
const flag = `<i class="fm-icon ${data.expanded ? "fm-expanded-icon" : "fm-collapsed-icon"}"
title="${data.expanded ? "Click to collapse" : "Click to expand"}"></i>
<img class="flag-icon" src="https://cdn.flexmonster.com/i/flags/${name.toLowerCase()}.svg">`;
cell.text = `${flag}<span style="margin-left: 2px; line-height: 16px">${data.member.caption}</span>`;
cell.addClass("fm-custom-cell");
}
};
useEffect(() => {
return () => {
stackedChartRoot?.dispose();
pictorialChartRoot?.dispose();
pieChartRoot?.dispose();
mapChartRoot?.dispose();
};
});
return (
<>
<FlexmonsterReact.Pivot
ref={pivotRef}
height={340}
report={report}
reportcomplete={reportComplete}
customizeCell={customizeCell}
licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
/>
<div className="demo-box">
<div className="demo-title">Overall Cheese Interest by Month</div>
<div id="amcharts-stacked-container" className="chart-container"></div>
</div>
<div className="demo-box">
<div className="demo-title">Total Cheese Interest by Country</div>
<div id="amcharts-pictorial-container" className="chart-container"></div>
<div>
Icons made by{" "}
<a href="https://www.freepik.com" title="Freepik">Freepik </a>{" "} from{" "}
<a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
</div>
</div>
<div className="demo-box">
<div className="demo-title">Feta Interest by Month</div>
<div id="amcharts-pie-container" className="chart-container"></div>
</div>
<div className="demo-box">
<div className="demo-title">Feta Interest by Country</div>
<div id="amcharts-map-container" className="chart-container"></div>
</div>
</>
);
}
export default PivotTableDemo;
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.chart-container {
height: 450px;
}
.demo-box {
background-color: #fafafa;
position: relative;
padding: 40px 30px 30px 30px;
border: 1px solid #e9e9e9;
margin-bottom: 20px;
margin-top: 40px;
}
.demo-title {
font-size: 18px;
margin-bottom: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 24px;
}
.fm-custom-cell {
display: flex !important;
align-items: center !important;
font-size: 12px !important;
}
.fm-custom-cell .flag-icon {
width: 21px !important;
height: 16px !important;
margin-left: 0 !important;
margin-right: 2px !important;
}
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-expanded .fm-expanded-icon::before,
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-collapsed .fm-collapsed-icon::before {
top: -2px;
height: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flexmonster & amCharts Demo</title>
<!-- This file contains the iconPath() function needed for the pictorial chart -->
<script src="https://cdn.flexmonster.com/data/demos/amcharts-iconPath.js"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Check this step-by-step Integration with amCharts guide to start creating the best visualizations quickly.