Flexmonster MCP Server is here! Connect your ✨AI assistant to our documentation. Get started
+
Get Free Trial
Get Free Trial
  1. Pivot Table demo
Data Sources
  1. MS Analysis Services
  2. Elasticsearch
  3. JSON and CSV
Views
  1. One million rows
  2. Pivot charts
  3. Dashboard
  4. Classic (tabular) view
  5. Flat table
Integration
  1. With amCharts
  2. With Highcharts
  3. With FusionCharts
  4. With Google Charts
Other
  1. Themes
  2. Localization
  3. Heat map
  4. Custom cells
  5. Live data update
  1. More examples

Themes

Change the look & feel of your reporting tool simply and quickly with our predefined CSS themes.

For the best experience

Play with the demo on a larger screen: save this link for later or watch the video review now.


Edit in JSfiddle Get Free Trial
    const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 600,
  toolbar: true,
  report: {
    dataSource: {
      type: "csv",
      filename: "https://cdn.flexmonster.com/data/sales.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Salesperson",
        },
        {
          uniqueName: "Payment Method",
        },
      ],
      columns: [
        {
          uniqueName: "Month",
          filter: {
            members: [
              "month.[june]",
              "month.[july]",
              "month.[august]"
            ],
          },
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Revenue",
          aggregation: "sum",
          format: "currency"
        },
      ],
      sorting: {
        column: {
          type: "desc",
          tuple: [],
          measure: {
            uniqueName: "Revenue",
            aggregation: "sum"
          },
        },
      },
      expands: {
        rows: [
          {
            tuple: ["salesperson.[laszlo horvath]"],
          },
        ],
      },
    },
    formats: [
      {
        name: "",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        nullValue: "",
        textAlign: "right",
        isPercent: false
      },
      {
        name: "currency",
        decimalPlaces: 2,
        currencySymbol: "$",
        positiveCurrencyFormat: "$1"
      }
    ]
  },
  shareReportConnection: {
    url: "https://olap.flexmonster.com:9500",
  },
  beforetoolbarcreated: function (toolbar) {
    toolbar.showShareReportTab = true;
  },
});

    <link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/stripedblue/flexmonster.min.css" />

<!-- More themes: -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/stripedteal/flexmonster.min.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/purple/flexmonster.min.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/blackorange/flexmonster.min.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/brightorange/flexmonster.min.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/yellow/flexmonster.min.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/green/flexmonster.min.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/midnight/flexmonster.min.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/macos/flexmonster.min.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/softdefault/flexmonster.min.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/lightblue/flexmonster.min.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/dark/flexmonster.min.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/teal/flexmonster.min.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/orange/flexmonster.min.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.flexmonster.com/theme/old/flexmonster.min.css" /> -->


<div id="pivot-container"></div>

    Choose between available color schemes that come with Flexmonster Pivot Table & Charts. It takes only one line of code to change the style of the component.

    We offer a variety of predefined skins, ten of which are presented above. See the full list of available built-in themes.

    You can pick one of these themes or create a custom theme in corporate branding colors and apply it to the web reporting tool.

    Refer to the Changing themes guide to learn how to apply a built-in theme, add custom CSS over it, or create a new one from scratch.

    To make it easy for you to create a custom theme for Flexmonster, we added a custom theme builder app. Use it to build themes in no time and keep Flexmonster styles in one place.

    See our live examples

    With Google Charts Localization
    Prev Next

    Frequently asked questions

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

    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.