React Pivot Table with Highcharts

Flexmonster Pivot Table & Charts integrates with Highcharts — a rock-solid and flexible charting library — in a few steps.

Smart business analytics has never been as engaging and straightforward as reporting with the Flexmonster pivot grid for React and Highcharts. Add a data dashboard to your report and see how an essential tool for monitoring business objectives and performance will boost your analytics.

Requests vs Answered Calls

All the vital metrics and KPIs can be seen at a glance when displayed on a dashboard. To have another view of your data, slice and dice the data on the grid and reveal the insights via the charts.

Revenue vs Support Cost

Customer Satisfaction

Edit in JSfiddle Get Free Trial

import { useRef } from "react";

import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/flexmonster.css";
import "flexmonster/lib/flexmonster.highcharts.js";

import Highcharts from "highcharts";

function PivotTableDemo() {
  const pivotRef = useRef(null);

  const report = {
    dataSource: {
      type: "json",
      filename: "https://cdn.flexmonster.com/data/demos/highcharts-demo-data.json"
    },
    slice: {
      rows: [
        {
          uniqueName: "Date.Month"
        }
      ],
      columns: [
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
        {
          uniqueName: "Requests",
          aggregation: "sum"
        },
        {
          uniqueName: "Answered Calls",
          aggregation: "sum"
        },
        {
          uniqueName: "Revenue",
          aggregation: "sum",
          format: "currency",
          active: false
        }
      ],
      sorting: {
        column: {
          type: "desc",
          tuple: [],
          measure: {
            uniqueName: "Answered Calls",
            aggregation: "sum"
          }
        }
      }
    },
    formats: [
      {
        name: "",
        thousandsSeparator: ","
      },
      {
        name: "currency",
        decimalSeparator: ".",
        decimalPlaces: 2,
        currencySymbol: "$"
      }
    ],
    options: {
      showHeaders: false
    }
  };

  const reportComplete = () => {
    pivotRef.current.flexmonster.off("reportcomplete");
    setGlobalChartsOptions();
    createLineChart();
    createColumnChart();
    createPieChart();
  };

  const setGlobalChartsOptions = () => {
    Highcharts.setOptions({
      colors: [
        "#4cbf8b",
        "#e8734c",
        "#ffcd4c",
        "#9875e3",
        "#4c9eff",
        "#8acfc3",
        "#cd97e6",
        "#f1d34c",
        "#65d2e7"
      ],
      lang: {
        thousandsSep: ","
      },
      chart: {
        plotBackgroundColor: "#fafafa",
        backgroundColor: "#fafafa",
        style: {
          fontFamily: "Serif Typeface"
        }
      }
    });
  };

  const createLineChart = () => {
    pivotRef.current.flexmonster.highcharts.getData(
      {
        type: "line"
      },
      drawLineChart,
      updateLineChart
    );
  };

  const drawLineChart = (chartData) => {
    chartData.xAxis.title.enabled = false;
    chartData.xAxis.type = "datetime";
    Highcharts.chart("highcharts-container", chartData);
  };

  const updateLineChart = (chartData) => {
    drawLineChart(chartData);
  };

  const createColumnChart = () => {
    pivotRef.current.flexmonster.highcharts.getData(
      {
        type: "column",
        slice: {
          rows: [
            {
              uniqueName: "Date.Month"
            }
          ],
          columns: [
            {
              uniqueName: "[Measures]"
            }
          ],
          measures: [
            {
              uniqueName: "Revenue",
              aggregation: "sum"
            },
            {
              uniqueName: "Support Cost",
              aggregation: "sum"
            }
          ]
        }
      },
      drawColumnChart,
      updateColumnChart
    );
  };

  const drawColumnChart = (chartData, rawData) => {
    const currencyFormat = rawData.meta.formats.find((format) => format.name == "currency");
    chartData.xAxis.title.enabled = false;
    chartData.legend = {
      enabled: false
    };
    if (chartData.yAxis == undefined) {
      chartData.yAxis = {};
    }
    for (let i = 0; i < chartData.yAxis.length; i++) {
      chartData.yAxis[i].labels = {
        format: pivotRef.current.flexmonster.highcharts.getAxisFormat(currencyFormat)
      };
    }

    for (let i = 0; i < chartData.series.length; i++) {
      chartData.series[i].tooltip = {
        pointFormat: "{series.name}: <b>" + 
                     pivotRef.current.flexmonster.highcharts.getPointYFormat(currencyFormat) + 
                     "</b><br/>"
      };
    }
    chartData.xAxis.title.enabled = false;
    chartData.legend = {
      enabled: false
    };
    chartData.xAxis.type = "datetime";
    Highcharts.chart("highcharts-column-container", chartData);
  };

  const updateColumnChart = (chartData) => {
    // Here you can add your own logic for updating the chart
  };

  const createPieChart = () => {
    pivotRef.current.flexmonster.highcharts.getData(
      {
        type: "pie",
        slice: {
          rows: [
            {
              uniqueName: "Customer Satisfaction"
            }
          ],
          columns: [
            {
              uniqueName: "[Measures]"
            }
          ],
          measures: [
            {
              uniqueName: "Answered Calls",
              aggregation: "sum"
            }
          ]
        }
      },
      drawPieChart,
      updatePieChart
    );
  };

  const drawPieChart = (chartData) => {
    Highcharts.chart("highcharts-pie-container", chartData);
  };

  const updatePieChart = (chartData) => {
    // Here you can add your own logic for updating the chart
  };

  return (
    <>
      <FlexmonsterReact.Pivot
        ref={pivotRef}
        height={430}
        report={report}
        reportcomplete={reportComplete}
        licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
      />

      <div className="demo-box">
        <div className="demo-title">Requests vs Answered Calls</div>
        <div id="highcharts-container"></div>
      </div>

      <div className="demo-box">
        <div className="demo-title">Revenue vs Support Cost</div>
        <div id="highcharts-column-container"></div>
      </div>

      <div className="demo-box">
        <div className="demo-title">Customer Satisfaction</div>
        <div id="highcharts-pie-container"></div>
      </div>
    </>
  );
}

export default PivotTableDemo;

.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;
  color: #555;
}

Learn how to create a ready-to-use React dashboard equipped with interactive features of the pivot table and charts by following the step-by-step Integration with Highcharts guide.

With amCharts With FusionCharts

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 Highcharts

For the best experience

See our live examples

Frequently asked questions