Need a special offer?Find out if your project fits.
+
List of all demos

    const pivot = new Flexmonster({
      container: "#pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      height: 600,
      toolbar: true,
      report: {
        dataSource: {
          type: "csv",
          filename: "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",
            },
          ],
          sorting: {
            column: {
              type: "desc",
              tuple: [],
              measure: {
                uniqueName: "Revenue",
                aggregation: "sum",
              },
            },
          },
          expands: {
            rows: [
              {
                tuple: ["salesperson.[laszlo horvath]"],
              },
            ],
          },
        },
        formats: [
          {
            name: "",
            thousandsSeparator: ",",
            decimalSeparator: ".",
            decimalPlaces: 2,
            currencySymbol: "$",
            positiveCurrencyFormat: "$1",
            nullValue: "",
            textAlign: "right",
            isPercent: false,
          },
        ],
      },
      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 report theme in corporate branding colors and apply it to the web reporting tool.

    Refer to the customizing appearance 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.