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