React Pivot Table with amCharts

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.

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!

Overall Cheese Interest by Month

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.

Total Cheese Interest by Country

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.

Feta Interest by Month

Feta Interest by Country

Edit in JSfiddle Get Free Trial

import { useRef, useEffect } from "react";

import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/flexmonster.css";
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;
  font-weight: 600;
  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.

Flat table With Highcharts

Prev Next

Frequently asked questions

Can't find your answer here?
Visit the FAQ page

What is Flexmonster Pivot Table & Charts?

Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.

Which frameworks does Flexmonster work with?

Which data sources can Flexmonster connect to?

How is Flexmonster licensed?

Can I try Flexmonster before buying?

Changes to Flexmonster Software License Agreement

React Pivot Table with amCharts

For the best experience

See our live examples

Frequently asked questions