Get Free Trial
List of all demos

    function setTheme(cssUrl) {
      var prevThemeTags = getPrevTheme();
      var link = document.createElement('link');
      link.href = cssUrl;
      link.rel = "stylesheet";
      link.type = "text/css";
      link["onload"] = function() {
        if (prevThemeTags != null) {
          for (var i = 0; i < prevThemeTags.length; i++) {
            if (window.ActiveXObject || "ActiveXObject" in window) {
              prevThemeTags[i].removeNode(true);
            } else {
              prevThemeTags[i].remove();
            }
          }
        }
      };
      document.body.appendChild(link);
    }
    
    function getPrevTheme() {
      var linkTags = document.head.getElementsByTagName("link");
      var prevThemeTags = [];
      for (var i = 0; i < linkTags.length; i++) {
        if (linkTags[i].href.indexOf("flexmonster.min.css") > -1 || 
            linkTags[i].href.indexOf("flexmonster.css") > -1) {
          prevThemeTags.push(linkTags[i]);
        }
      }
      linkTags = document.body.getElementsByTagName("link");
      for (var i = 0; i < linkTags.length; i++) {
        if (linkTags[i].href.indexOf("flexmonster.min.css") > -1 || 
            linkTags[i].href.indexOf("flexmonster.css") > -1) {
          prevThemeTags.push(linkTags[i]);
        }
      }
      return prevThemeTags;
    }
    
    var 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
    });
    
    var header = document.getElementById("buttons-toolbar");
    var btns = header.getElementsByClassName("btn-theme");
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", buttonHandler);
    }
    
    function buttonHandler() {
      var current = document.getElementsByClassName("btn-active");
      current[0].className = current[0].className.replace(" btn-active", "");
      this.className += " btn-active";
    }
    
    <div class="demo-toolbar" id="buttons-toolbar">
      <a class="btn-theme striped-lightblue btn-active"
    onclick="setTheme('https://cdn.flexmonster.com/theme/stripedblue/flexmonster.min.css')">
        <span class="theme-name-short">Sb</span>
        <span class="theme-name">Striped-Blue</span>
      </a>
      <a class="btn-theme striped-teal"
    onclick="setTheme('https://cdn.flexmonster.com/theme/stripedteal/flexmonster.min.css')">
        <span class="theme-name-short">ST</span>
        <span class="theme-name">Striped-Teal</span>
      </a>
      <a class="btn-theme purple"
    onclick="setTheme('https://cdn.flexmonster.com/theme/purple/flexmonster.min.css')">
        <span class="theme-name-short">Pu</span>
        <span class="theme-name">Purple</span>
      </a>
      <a class="btn-theme black-orange"
    onclick="setTheme('https://cdn.flexmonster.com/theme/blackorange/flexmonster.min.css')">
        <span class="theme-name-short">Bo</span>
        <span class="theme-name">Black-Orange</span>
      </a>
      <a class="btn-theme bright-orange"
    onclick="setTheme('https://cdn.flexmonster.com/theme/brightorange/flexmonster.min.css')">
        <span class="theme-name-short">Or</span>
        <span class="theme-name">Bright-Orange</span>
      </a>
      <a class="btn-theme yellow"
    onclick="setTheme('https://cdn.flexmonster.com/theme/yellow/flexmonster.min.css')">
        <span class="theme-name-short">Ye</span>
        <span class="theme-name">Yellow</span>
      </a>
      <a class="btn-theme green"
    onclick="setTheme('https://cdn.flexmonster.com/theme/green/flexmonster.min.css')">
        <span class="theme-name-short">Ge</span>
        <span class="theme-name">Green</span>
      </a>
      <a class="btn-theme midnight"
    onclick="setTheme('https://cdn.flexmonster.com/theme/midnight/flexmonster.min.css')">
        <span class="theme-name-short">MN</span>
        <span class="theme-name">Midnight</span>
      </a>
      <a class="btn-theme mac-os"
    onclick="setTheme('https://cdn.flexmonster.com/theme/macos/flexmonster.min.css')">
        <span class="theme-name-short">Mo</span>
        <span class="theme-name">Mac OS</span>
      </a>
      <a class="btn-theme soft-default"
    onclick="setTheme('https://cdn.flexmonster.com/theme/softdefault/flexmonster.min.css')">
        <span class="theme-name-short">SD</span>
        <span class="theme-name">Soft-Default</span>
      </a>
    </div>
    <div id="pivot-container"></div>
    
    .demo-toolbar {
      padding: 7px;
    }
    
    .demo-toolbar .theme-name {
      margin-right: 7px;
      text-transform: none;
      display: none;
      color: #fff;
    }
    
    .demo-toolbar .btn-theme {
      width: 60px;
      margin: 7px 7px 7px 0px;
      border-radius: 5px;
      vertical-align: middle;
      padding: 7px;
      background-color: #F5F5F5;
      border: none;
      white-space: nowrap;
      text-transform: uppercase;
      cursor: pointer;
      display: inline-block;
      font-weight: normal;
      font-size: 14px;
      text-align: center;
      align-items: flex-start;
      box-sizing: border-box;
    }
    
    .demo-toolbar .btn-theme:hover {
      border: none;
    }
    
    .demo-toolbar .btn-theme.btn-active {
      width: 150px;
      position: relative;
    }
    
    .demo-toolbar .btn-theme.btn-active::after {
      content: '';
      position: absolute;
      top: 100%;
      left: calc(50% - 7px);
      width: 15px;
      height: 7px;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
    }
    
    .demo-toolbar .btn-theme.btn-active .theme-name {
      display: inline-block;
    }
    
    .demo-toolbar .btn-theme .theme-name-short {
      color: #fff;
      display: inline-block;
      padding: 7px;
      border-radius: 5px;
    }
    
    .demo-toolbar .striped-lightblue .theme-name-short,
    .demo-toolbar .striped-lightblue:hover,
    .demo-toolbar .striped-lightblue.btn-active,
    .demo-toolbar .striped-lightblue.btn-active::after {
      background: repeating-linear-gradient(to bottom,
          #0277BD,
          #0277BD 50%,
          #0090DE 50%,
          #0090DE);
    }
    
    .demo-toolbar .bright-orange .theme-name-short,
    .demo-toolbar .bright-orange:hover,
    .demo-toolbar .bright-orange.btn-active,
    .demo-toolbar .bright-orange.btn-active::after {
      background: #FB7841;
    }
    
    .demo-toolbar .yellow .theme-name-short,
    .demo-toolbar .yellow:hover,
    .demo-toolbar .yellow.btn-active,
    .demo-toolbar .yellow.btn-active::after {
      background: #FBC02D;
    }
    
    .demo-toolbar .green .theme-name-short,
    .demo-toolbar .green:hover,
    .demo-toolbar .green.btn-active,
    .demo-toolbar .green.btn-active::after {
      background: #69b01e;
    }
    
    .demo-toolbar .striped-teal .theme-name-short,
    .demo-toolbar .striped-teal:hover,
    .demo-toolbar .striped-teal.btn-active,
    .demo-toolbar .striped-teal.btn-active::after {
      background: repeating-linear-gradient(to bottom,
          #007A6E,
          #007A6E 50%,
          #009688 50%,
          #009688);
    }
    
    .demo-toolbar .purple .theme-name-short,
    .demo-toolbar .purple:hover,
    .demo-toolbar .purple.btn-active,
    .demo-toolbar .purple.btn-active::after {
      background: #7E57C2;
    }
    
    .demo-toolbar .mac-os .theme-name-short,
    .demo-toolbar .mac-os:hover,
    .demo-toolbar .mac-os.btn-active,
    .demo-toolbar .mac-os.btn-active::after {
      background: #AAAEB5;
    }
    
    .demo-toolbar .soft-default .theme-name-short,
    .demo-toolbar .soft-default:hover,
    .demo-toolbar .soft-default.btn-active,
    .demo-toolbar .soft-default.btn-active::after {
      background: #CDCDCF;
    }
    
    .demo-toolbar .midnight .theme-name-short,
    .demo-toolbar .midnight:hover,
    .demo-toolbar .midnight.btn-active,
    .demo-toolbar .midnight.btn-active::after {
      background: #111111;
    }
    
    .demo-toolbar .black-orange .theme-name-short,
    .demo-toolbar .black-orange:hover,
    .demo-toolbar .black-orange.btn-active,
    .demo-toolbar .black-orange.btn-active::after {
      background: linear-gradient(to left, #F56B30 50%, #222 50%);
    }
    
    .demo-toolbar .btn-theme.black-orange:hover .theme-name-short,
    .demo-toolbar .btn-theme.black-orange.btn-active .theme-name-short,
    .demo-toolbar .btn-theme.striped-teal:hover .theme-name-short,
    .demo-toolbar .btn-theme.striped-teal.btn-active .theme-name-short,
    .demo-toolbar .btn-theme.striped-lightblue:hover .theme-name-short,
    .demo-toolbar .btn-theme.striped-lightblue.btn-active .theme-name-short {
      background: transparent;
    }
    

    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.