Change the look & feel of your reporting tool simply and quickly with our predefined CSS themes.
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.