Get Free Trial
List of all demos

    let pivot = new Flexmonster({
      container: "#pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      report: {
        dataSource: {
          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
        }],
      },
      width: "100%",
      height: 600,
      toolbar: 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" /> -->
    
    <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 themes: 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.