Flexmonster Pivot Charts for React

Flexmonster Pivot Charts — an approach to the visualization of aggregated data from the grid.

import { useRef } from "react";
import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/flexmonster.css";

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

  const reportColumn = {
    dataSource: {
      type: "json",
      filename: "https://cdn.flexmonster.com/data/demos/pivot-charts-demo-data.json"
    },
    options: {
      viewType: "charts",
      chart: {
        type: "column"
      }
    },
    slice: {
      rows: [
        {
          uniqueName: "Order Date.Month"
        }
      ],
      columns: [
        {
          uniqueName: "City",
          filter: {
            measure: {
              uniqueName: "Orders",
              aggregation: "sum"
            },
            query: {
              top: 5
            }
          }
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
        {
          uniqueName: "Orders",
          aggregation: "sum"
        }
      ]
    },
    formats: [
      {
        name: "",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        decimalPlaces: 0
      }
    ]
  };

  const switchChart = (type) => {
    const pivotReport = pivotRef.current.flexmonster.getReport();

    pivotReport.options = {
      viewType: "charts",
      chart: {
        type: type
      }
    };

    switch (type) {
      case "column":
        pivotReport.slice = reportColumn.slice;
        break;
      case "bar_h":
        pivotReport.slice = {
          rows: [
            {
              uniqueName: "Referring Site",
              filter: {
                measure: {
                  uniqueName: "Orders",
                  aggregation: "sum"
                },
                query: {
                  top: 6
                }
              }
            }
          ],
          columns: [
            {
              uniqueName: "[Measures]"
            },
            {
              uniqueName: "Payment Type",
              filter: {
                members: ["payment type.[debit card]", "payment type.[invoice]"]
              }
            }
          ],
          measures: [
            {
              uniqueName: "Orders",
              aggregation: "sum"
            }
          ]
        };
        break;
      case "line":
        pivotReport.slice = {
          rows: [
            {
              uniqueName: "Order Date.Year"
            }
          ],
          columns: [
            {
              uniqueName: "[Measures]"
            },
            {
              uniqueName: "Referring Site",
              filter: {
                measure: {
                  uniqueName: "Orders",
                  aggregation: "sum"
                },
                query: {
                  top: 2
                }
              }
            }
          ],
          measures: [
            {
              uniqueName: "Orders",
              aggregation: "sum"
            }
          ],
          sorting: {
            row: {
              type: "desc",
              tuple: [],
              measure: {
                uniqueName: "Orders",
                aggregation: "sum"
              }
            }
          }
        };
        break;
      case "scatter":
        pivotReport.slice = {
          rows: [
            {
              uniqueName: "Order Date.Year"
            }
          ],
          columns: [
            {
              uniqueName: "City",
              filter: {
                measure: {
                  uniqueName: "Orders",
                  aggregation: "sum"
                },
                query: {
                  top: 3
                }
              }
            },
            {
              uniqueName: "[Measures]"
            }
          ],
          measures: [
            {
              uniqueName: "Orders",
              aggregation: "sum"
            }
          ]
        };
        break;
      case "pie":
        pivotReport.slice = {
          rows: [
            {
              uniqueName: "City",
              filter: {
                measure: {
                  uniqueName: "Revenue"
                },
                query: {
                  top: 5
                }
              }
            }
          ],
          columns: [
            {
              uniqueName: "[Measures]"
            }
          ],
          measures: [
            {
              uniqueName: "Revenue",
              formula: "sum('Amount') * sum('Price')",
              individual: true,
              format: "currency"
            }
          ]
        };
        pivotReport.formats.push({
          name: "currency",
          currencySymbol: "$",
          decimalPlaces: 2
        });
        break;
      case "column_line":
        pivotReport.slice = {
          rows: [
            {
              uniqueName: "Order Date.Year"
            }
          ],
          columns: [
            {
              uniqueName: "[Measures]"
            }
          ],
          measures: [
            {
              uniqueName: "Orders",
              aggregation: "sum"
            },
            {
              uniqueName: "Revenue",
              formula: "sum('Amount') * sum('Price')",
              individual: true,
              format: "currency"
            }
          ]
        };
        pivotReport.formats.push({
          name: "currency",
          currencySymbol: "$",
          decimalPlaces: 2
        });
        break;
      case "stacked_column":
        pivotReport.slice = {
          rows: [
            {
              uniqueName: "Payment Type",
              filter: {
                measure: {
                  uniqueName: "Orders"
                },
                query: {
                  top: 3
                }
              }
            }
          ],
          columns: [
            {
              uniqueName: "Referring Site",
              filter: {
                measure: {
                  uniqueName: "Orders"
                },
                query: {
                  top: 3
                }
              }
            },
            {
              uniqueName: "[Measures]"
            }
          ],
          measures: [
            {
              uniqueName: "Orders",
              aggregation: "sum"
            }
          ],
          sorting: {
            column: {
              type: "desc",
              tuple: [],
              measure: {
                uniqueName: "Orders",
                aggregation: "sum"
              }
            }
          }
        };
        break;
      default:
        break;
    }

    pivotRef.current.flexmonster.setReport(pivotReport);
  };

  const showGrid = () => {
    const pivotReport = pivotRef.current.flexmonster.getReport();

    pivotReport.slice = {
      reportFilters: [
        {
          uniqueName: "Order Date.Year"
        },
        {
          uniqueName: "Order Date.Month"
        },
        {
          uniqueName: "Order Date.Day"
        }
      ],
      rows: [
        {
          uniqueName: "Payment Type"
        }
      ],
      columns: [
        {
          uniqueName: "[Measures]"
        },
        {
          uniqueName: "Referring Site"
        }
      ],
      measures: [
        {
          uniqueName: "Revenue",
          formula: "sum('Amount') * sum('Price')",
          individual: true,
          format: "currency"
        }
      ]
    };
    pivotReport.conditions = [
      {
        formula: "#value < 45000",
        measure: "Revenue",
        format: {
          backgroundColor: "#df3800",
          color: "#fff",
          fontFamily: "Arial",
          fontSize: "12px"
        }
      },
      {
        formula: "#value > 400000",
        measure: "Revenue",
        format: {
          backgroundColor: "#00a45a",
          color: "#fff",
          fontFamily: "Arial",
          fontSize: "12px"
        }
      }
    ];
    pivotReport.options = {
      viewType: "grid"
    };
    pivotReport.formats.push({
      name: "currency",
      currencySymbol: "$",
      decimalPlaces: 2
    });
    pivotRef.current.flexmonster.setReport(pivotReport);
  };

  return (
    <>
      <button onClick={showGrid}>Grid</button>
      <button onClick={() => switchChart("column")}>Column</button>
      <button onClick={() => switchChart("bar_h")}>Bar</button>
      <button onClick={() => switchChart("line")}>Line</button>
      <button onClick={() => switchChart("scatter")}>Scatter</button>
      <button onClick={() => switchChart("pie")}>Pie</button>
      <button onClick={() => switchChart("column_line")}>Combo</button>
      <button onClick={() => switchChart("stacked_column")}>Stacked</button>

      <FlexmonsterReact.Pivot
        ref={pivotRef}
        report={reportColumn}
      />
    </>
  );
}

export default PivotTableDemo;

#fm-pivot-view .fm-chart .fm-circle {
  r: 8;
}

/* Chart style  */
.fm-charts-color-1 {
  fill: rgb(0, 164, 90) !important;
}

.fm-charts-color-2 {
  fill: rgb(223, 56, 0) !important;
}

.fm-charts-color-3 {
  fill: rgb(255, 184, 0) !important;
}

.fm-charts-color-4 {
  fill: rgb(109, 59, 216) !important;
}

.fm-charts-color-5 {
  fill: rgb(0, 117, 255) !important;
}

#fm-pivot-view .fm-bar,
#fm-pivot-view .fm-charts-view .fm-chart-legend ul li .fm-icon-display,
#fm-pivot-view .fm-line,
#fm-pivot-view .fm-arc path,
#fm-pivot-view .fm-bar-stack,
#fm-pivot-view .fm-scatter-point {
  opacity: 70% !important;
}

#fm-yAxis-label,
#fm-xAxis > text,
#fm-yAxis > text {
  display: none;
}

End-users can filter, expand, collapse, drill up, and drill down the data hierarchies, drill through the chart segments, and control the legend elements. Embedding interactive charts into your React application will just take a few simple steps with the helpful Flexmonster Pivot Charts guide.

Our Flexmonster React pivot component supports the following chart types: column chart, bar chart, line chart, scatter chart, pie chart, stacked column chart, and combined column chart.

Also, you can jump from the grid view to the built-in charts with just one click on the Toolbar. Alternatively, you can use API calls to create the needed functionality.

One million rows Dashboard

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

Flexmonster Pivot Charts for React

For the best experience

See our live examples

Frequently asked questions