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