We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
List of all demos

React Pivot Table with Highcharts

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

Smart business analytics has never been as engaging and straightforward as reporting with 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 & dice it on the grid and reveal the insights via the charts.

Revenue vs Support Cost
Customer Satisfaction

    import React, { Component } from "react";
    import * as FlexmonsterReact from "react-flexmonster";
    
    import "flexmonster/lib/flexmonster.highcharts.js";
    import Highcharts from "highcharts";
    
    class PivotTableDemo extends Component {
      constructor(props) {
        super(props);
        this.myRef = React.createRef();
      }
    
      render() {
        return (
          <div className="App">
            <FlexmonsterReact.Pivot
              ref={this.myRef}
              componentFolder="https://cdn.flexmonster.com/"
              height={300}
              licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
              report={{
                dataSource: {
                  type: "json",
                  filename: "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,
                },
              }}
              reportcomplete={this.reportComplete}
            />
    
            <div class="demo-box">
              <div class="demo-title">
                <strong>Requests vs Answered Calls</strong>
              </div>
              <div id="highcharts-container"></div>
            </div>
    
            <div class="demo-box">
              <div class="demo-title">
                <strong>Revenue vs Support Cost</strong>
              </div>
              <div id="highcharts-column-container"></div>
            </div>
    
            <div class="demo-box">
              <div class="demo-title">
                <strong>Customer Satisfaction</strong>
              </div>
              <div id="highcharts-pie-container"></div>
            </div>
          </div>
        );
      }
    
      reportComplete = () => {
        this.myRef.current.flexmonster.off(this.reportComplete);
        this.setGlobalChartsOptions();
        this.createLineChart();
        this.createColumnChart();
        this.createPieChart();
      };
    
      setGlobalChartsOptions() {
        Highcharts.setOptions({
          colors: [
            "#4cbf8b",
            "#e8734c",
            "#ffcd4c",
            "#9875e3",
            "#4c9eff",
            "#8acfc3",
            "#cd97e6",
            "#f1d34c",
            "#65d2e7",
          ],
          lang: {
            thousandsSep: ",",
          },
          chart: {
            plotBackgroundColor: "#fafafa",
            backgroundColor: "#fafafa",
            style: {
              fontFamily: "Serif Typeface",
            },
          },
        });
      }
    
      createLineChart() {
        this.myRef.current.flexmonster.highcharts.getData(
          {
            type: "line",
          },
          this.drawLineChart,
          this.updateLineChart,
        );
      }
    
      drawLineChart(chartData) {
        chartData.xAxis.title.enabled = false;
        chartData.xAxis.type = "datetime";
        Highcharts.chart("highcharts-container", chartData);
      }
    
      updateLineChart(chartData) {
        this.drawLineChart(chartData);
      }
    
      createColumnChart() {
        this.myRef.current.flexmonster.highcharts.getData(
          {
            type: "column",
            slice: {
              rows: [
                {
                  uniqueName: "Date.Month",
                },
              ],
              columns: [
                {
                  uniqueName: "[Measures]",
                },
              ],
              measures: [
                {
                  uniqueName: "Revenue",
                  aggregation: "sum",
                },
                {
                  uniqueName: "Support Cost",
                  aggregation: "sum",
                },
              ],
            },
          },
          this.drawColumnChart,
          this.updateColumnChart,
        );
      }
    
      drawColumnChart(chartData) {
        let 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: pivot.highcharts.getAxisFormat(currencyFormat),
          };
        }
    
        for (let i = 0; i < chartData.series.length; i++) {
          chartData.series[i].tooltip = {
            pointFormat:
              "{series.name}: <b>" +
              pivot.highcharts.getPointYFormat(currencyFormat) +
              "</b><br/>",
          };
        }
        chartData.xAxis.title.enabled = false;
        chartData.legend = {
          enabled: false,
        };
        chartData.xAxis.type = "datetime";
        Highcharts.chart("highcharts-column-container", chartData);
      }
    
      updateColumnChart(chartData) {
        // Here you can add your own logic for updating the chart
      }
    
      createPieChart() {
        this.myRef.current.flexmonster.highcharts.getData(
          {
            type: "pie",
            slice: {
              rows: [
                {
                  uniqueName: "Customer Satisfaction",
                },
              ],
              columns: [
                {
                  uniqueName: "[Measures]",
                },
              ],
              measures: [
                {
                  uniqueName: "Answered Calls",
                  aggregation: "sum",
                },
              ],
            },
          },
          this.drawPieChart,
          this.updatePieChart,
        );
      }
    
      drawPieChart(chartData) {
        Highcharts.chart("highcharts-pie-container", chartData);
      }
    
      updatePieChart(chartData) {
        // Here you can add your own logic for updating the chart
      }
    }
    
    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;
      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.