Custom Theme

Custom theme settings allow you to customize the appearance of the dashboard viewer. The user can achieve this theme customization using JSON settings which have separate properties to customize the dashboard viewer. The JSON settings can be given as input for API member “customThemeSettings”.

EnableCustomTheming

EnableCustomTheming property will enable the customization of Dashboard Viewer appearance. After enable this the user can modify the appearance of Dashboard Viewer.

Default Value

False.

Example

  • js
  • $("#container").ejDashboardViewer({ 
    enableCustomTheming: true
    });

    customThemeSettings

    customThemeSettings contains JSON input which is used to customize the appearance of Dashboard Viewer.

    Default Value

    “”

    Example

  • js
  • $("#container").ejDashboardViewer({ 
    customThemeSettings: {
            "dashboard": {},
            "fontSettings": {},
            "banner": {},
            "container": {},
            "menuSettings": {},
        };    
    });

    customThemeSettings.dashboard

    Used for customizing the background color, background image, hovering color and menu hovering color of Dashboard Viewer.. User can set background image for Dashboard Viewer also. User can set either background- color or background image for Dashboard Viewer.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
    customThemeSettings: {
            "dashboard": {
                "background-color": "#0c0d0f",
                "background-image": "",
                "menu-hover-color": "#262A33",
                "icon-hover-color": "#F2F2F2",
            },
        };
    });

    customThemeSettings.fontSettings

    Used for customizing the font family, font size used in Dashboard Viewer. The user can use external fonts by specifying the source path of the along with format type. For using the external fonts need to give the source path where the external font is placed and need to give the format type.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
    customThemeSettings: {
            "fontSettings": {
                "font-family": 'Roboto',
                "src": "",
                "format": "",
                "font-size": "20px"
            },
        };
    });

    NOTE

    font size should not exceed 26px to view the title without any distortion.

    customThemeSettings.banner

    Used for customizing the background color, title color, title font size and icons color of dashboard banner. Using this settings user can customize the background color, title color and icons color.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
    customThemeSettings: {
            "banner": {
                "background-color": "linear-gradient(to bottom, rgba(35,36,40,1) 0%, rgba(24,25,29,1) 100%)",
                "title-color": "#aeb2b7",
                "icons-color": "#aeb2b7",
                "font-size": "20px"
            },
        };
    });

    NOTE

    font size should not exceed 26px to view the title without any distortion.

    How to hide the banner in the dashboard?

    Hide banner in the Dashboard by customizing CSS class “.e-dbrd-banner”

    Example

  • js
  • <!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;">
        <head>
            <style>
                .e-dbrd-banner {
                    display: none !important;
                    height: 0px !important;
                }
            </style>
            <title>Dashboard Viewer</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body style="width: 100%;height: 100%">
        <script type="text/javascript">
        $(function (e) {
            $("#container").ejDashboardViewer({
                serviceUrl: 'service URL',
                dashboardPath: 'Path of the dashboard'
            });
        });
        </script>
        <div id="container" style="width: 100%; height: 100%"></div>
        </body>
    </html>

    customThemeSettings.Container

    Used to customize the widget container. Using this settings user can customize the background color, border, box shadow, border radius, header background color, title color, title font size and icons color.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
    customThemeSettings: {
            "container": {
                "background-color": "#232428",
                "header-background-color": "#232428",
                "title-color": "#aeb2b7",
                "icons-color": "#aeb2b7",
                "border-radius": "2px",
                "box-shadow": "none",
                "font-size": "20px"
            },
        };
    });

    NOTE

    font size should not exceed 26px to view the title without any distortion.

    customThemeSettings.menuSettings

    Used to customize the widget container. Using this settings user can customize the background color, border, box shadow, border radius, header background color, title color and icons color.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
    customThemeSettings: {
            "menuSettings": {
                "background-color": "#333842",
                "border-color": "none",
                "font-color": "#f9f9f9",
            },
        };
    });

    customThemeSettings.descriptionSettings

    Used for customizing the background color, border color and font color of description popup of Dashboard Viewer. Using this settings user can customize the background color, border color and font color of description popup.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
    customThemeSettings: {
            "descriptionSettings": {
                "background-color": "#ff0000",
                "border-color": "rgb(238, 72, 163)",
                "font-color": "rgb(255, 255, 255)",
            },
        };
    });

    customThemeSettings.popupSettings

    Used for customizing the dialogs in the Dashboard Viewer such as export dialog, error detail dialog etc. The user can customize the background color, container background color, title color, font color, icons color, input box background, border and font color, error message color and hyperlink color.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
    customThemeSettings: {
            "popupSettings": {
                "popup-background-color": "rgba(0, 0, 0, 0.5)",
                "popup-container-background-color": "#333842",
                "popup-title-color": "rgb(255, 255, 255)",
                "popup-font-color": "rgb(255, 255, 255)",
                "popup-icons-color": "#ffffff",
                "input-box-background-color": "#2a2f38",
                "input-box-border-color": "#5a5f66",
                "inputbox-font-color": "#f9f9f9",
                "hyperlink-color": "rgb(255, 255, 255)",
                "error-msg-color": "rgb(255,255,255)",
            },
        };
    });

    customThemeSettings.buttonSettings

    Used for customizing the buttons in the Dashboard Viewer such as Export, Cancel, Reset, OK etc. The user can customize the background color and font color of buttons. The buttons in Dashboard Viewer are categorized as success button, cancel button, close button, reset button and disable button.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
    customThemeSettings: {
            "buttonSettings": {
                "success-background-color": "#009aef",
                "success-font-color": "#fff",
                "close-background-color": "#1f252d",
                "close-font-color": "#78a",
                "cancel-background-color": "#f4f4f4",
                "cancel-font-color": "#161616",
                "reset-background-color": "#f4f4f4",
                "reset-font-color": "#161616",
                "disabled-btn-background-color": "rgb(0, 0, 0)",
                "disabled-btn-font-color": "rgb(255, 255, 255)",
            },
        };
    });

    customThemeSettings.maximizationSettings

    Used for customizing the background color, header background color, container background color, footer background color, title color, icons color and description font color of widgets in maximized view.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
    customThemeSettings: {
            "maximizationSettings": {
                "max-background-color": "rgba(0, 0, 0, 0.5)",
                "max-header-background-color": "#232428",
                "max-container-background-color": "#232428",
                "max-footer-background-color": "#232428",
                "max-title-color": "#ffffff",
                "max-icons-color": "#ffffff",
                "description-font-color": "#ffffff",
            },
        };
    });

    customThemeSettings.filterOverviewSettings

    Used for customizing the background color, footer background color, title color and icons color of filter overview popup in Dashboard Viewer.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
    customThemeSettings: {
            "filterOverviewSettings": {
                "background-color": "#333842",
                "border-color": "#3c3d42",
                "footer-background-color": "#009aef",
                "font-color": "#f9f9f9",
                "icons-color": "#f9f9f9",
            },
        };
    });

    customThemeSettings.passiveErrorSettings

    Used for customizing the passive error banner that displays the error messages that occur while rendering dashboard. Using this settings user can customize the background color, font color, icons color and link color of passive error.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
    customThemeSettings: {
            "passiveErrorSettings": {
                "background-color": "#fbcb43",
                "font-color": "#1c1c1c",
                "icons-color": "#af8423",
                "link-color": "#996f07",
            },
        };
    });

    customThemeSettings.erroredContainer

    Used for customizing the errors/warnings shown in widget container that prevents the widget from rendering in the viewer. Using this settings user can customize the background color, font color and link color of error container.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
    customThemeSettings: {
            "erroredContainer": {
                "background-color": "#232428",
                "font-color": "#7a7e89",
                "link-color": "#3b99fc",
            },
        };
    });

    customThemeSettings.tooltipSettings

    Used for customizing the dashboard tooltip, that appears upon hovering on dashboard or widget title, maximizing icon, menu icon etc. Using this settings user can customize the background color, font color and border radius of tooltip.

    Example

  • js
  • $("#container").ejDashboardViewer({ 
    customThemeSettings: {
            "tooltipSettings": {
                "background-color": "#2a2f38",
                "font-color": "#ffffff",
                "border-radius": "2px",
            },
        };
    });

    Customized appearance of Dashboard Viewer

    CustomTheme

    Apply Custom Theme to Widget

    Through custom theme support we can apply user defined theme values to widgets in the dashboard.

    How to apply custom theme to widget

    The following steps illustrates how to define a theme and apply the theme to widgets

    • In Custom theme demo sample, open the “index.cshtml” in the following the location.

    Apply the theme to widgets

    • We can customize theme of widget under “widgetThemeSettings” section in the file.

    CSS properties

    We have customized the below CSS properties by using custom theme support.

    • background-color
    • font-color
    • font-family
    • border-color

    Grid

    Sections

    We can customize the below sections in grid widget.

    • Header
    • Content
    • Hover
    • Border
    • Selection

    We can customize the below properties in header section.

    • background-color
    • font-color
    • font-family

    For example, we can change the background color for grid header. Below code snippet represent to change the background color of grid header.

  • js
  • "header": 
    {
      "background-color": "red",
      "font-color": "#7a7e89",
      "font-family": "Roboto",
    },

    The following image illustrates the applied background color for grid header.

    Applied background color for grid header

    Content

    We can customize the below properties in content section.

    • background-color
    • font-family
    • font-color

    For example, we can change the background color for grid content. Below code snippet represent the to change background color of the grid content.

  • js
  • "content": 
     {
       "background-color": "pink",
       "font-color": "#7a7e89",
       "font-family": "Roboto",
     },

    The following image illustrates the applied background color for grid content.

    Applied background color for grid content

    Hover

    We can customize the ‘background-color’ for hover section.

    For example, while hovering on grid widget background color will be changed as red color. Below code snippet represent the background color for the hover effect.

  • js
  • "hover": 
    {
       "background-color": "red",
    },

    The following image illustrates the applied background color for grid hover.

    Applied background color for grid hover

    Border

    We can customize the border-color for the grid border. Below code snippet represent the border color for grid border.

  • js
  • "border":
     {
       "border-color": "white",
     },

    The following image illustrates the applied border color for grid border.

    Applied border color for grid border

    Selection

    We can customize the below properties for selection appearance of grid.

    • background-color
    • font-color

    For example, we can change the font-color for grid selection. Below code snippet represents to change the font color for grid while selection.

  • js
  • "selection":
     {
       "background-color": "#80284d",
       "font-color": "red",
     },

    The following image illustrates the applied font color for grid selection.

    Applied font color for grid selection

    PivotGrid

    Sections

    We can customize the below sections in PivotGrid widget.

    • Grouping bar
    • Grouping button
    • Icon
    • Header
    • Content
    • Summary
    • Hover

    Grouping bar

    We can customize the below properties in grouping bar section.

    • background-color
    • border-color
    • font-family
    • font-color

    For example, we can customize the background color of grouping bar. Below code snippet represent to change the background color of grouping bar.

  • js
  • "grouping-bar": 
    {
       "background-color": "pink",
       "border-color": "#33353a",
       "font-color": "#aeb2b7",
       "font-family": "Roboto"
    },

    The following image illustrates the applied background color for PivotGrid grouping bar.

    Applied background color for PivotGrid grouping bar

    Grouping button

    We can customize the below properties in grouping button section.

    • background-color
    • font-color
    • font-family

    For example, we can customize the background color for grouping button. Below code snippet represents to change the background color of grouping button.

  • js
  • "grouping-button": 
       {
         "background-color": "pink",
         "font-color": "#fff",
         "font-family": "Roboto"
       },

    The following image illustrates the applied background color for PivotGrid grouping button.

    Applied background color for PivotGrid grouping button

    Icon

    We can customize the below properties in icon section.

    • filter-icon-color
    • sort-icon-color
    • expand-icon-color
    • collapse-icon-color

    For example, we can change the filter icon color. Below code snippet represents to change the filter icon color of PivotGrid widget.

  • js
  • "icon": 
    {
       "filter-icon-color": "orange",
       "sort-icon-color": "#19191c",
       "expand-icon-color": "#19191c",
       "collapse-icon-color": "#19191c"
    },

    The following image illustrates the applied filter icon color for PivotGrid.

    Applied filter icon color for PivotGrid

    Header

    We can customize the below properties in header section

    • background-color
    • border-color
    • font-family
    • font-color

    For example, we can customize the border color of header. Below code snippet represents to change the border color of header.

  • js
  • "header": 
    {
      "background-color": "#171819",
      "border-color": "orange",
      "font-color": "#aeb2b7",
      "font-family": "Roboto",
    },

    The following image illustrates the applied border color for PivotGrid header.

    Border color for PivotGrid header

    Content

    We can customize the below properties in content section.

    • background-color
    • border- color
    • font -color
    • font-family

    For example, we can customize the background color for content. Below code snippet represents to change the background color of content.

  • js
  • "content": 
    {
      "background-color": "pink",
      "border-color": "#33353a",
      "font-color": "#aeb2b7",
      "font-family": "Roboto",
    },

    The following image illustrates the applied background color for PivotGrid content.

    Background color for PivotGrid content

    Summary

    We can customize the below properties for summary section.

    • background-color
    • border- color
    • font-color
    • font-family

    For example, we can change the font color of summary. Below code snippet represent to change the font color for summary.

  • js
  • "summary": 
    {
      "background-color": "#0b0c0c",
      "border-color": "#33353a",
      "font-color": "blue",
      "font-family": "Roboto",
    },

    The following image illustrates the applied font color for PivotGrid summary.

    Font color for PivotGrid summary

    Hover

    We can customize the ‘background-color’ of hover for PivotGrid widget.

    For example, we can customize the background color of hover. Below code snippet represents to change the background color of hover effect.

  • js
  • "hover": 
    {
      "background-color": "green",
    },

    The following image illustrates the applied background color for pivotgrid hover.

    Background color for pivotgrid hover

    Card

    Sections

    We can customize the below sections in card widget.

    • Card
    • Title
    • Value
    • Variation
    • Selection

    Card

    We can customize the below properties in card widget.

    • background-color
    • border-color

    For example, we can customize the background color of card widget. Below code snippet represent to change the background color of card widget.

  • js
  • "card": 
      {
       "background-color": "pink",
       "border-color": "#3c3d42",
      },

    The following image illustrates the applied background color for card.

    Background color for card

    Title

    We can customize the below properties in title section

    • font-color
    • font-family

    For example, we can customize the font color of title. Below code snippet represent to change the font color of title.

  • js
  • "title": 
    {
      "font-color": "blue",
      "font-family": "Roboto",
    },

    The following image illustrates the applied font color for card title.

    Font color for card title

    Value

    We can customize the below properties in value section

    • font-color
    • font-family

    For example, we can customize the font family for value section. Below code snippet represent to change the font family.

  • js
  • "value": 
    {
       "font-color": "#01c4e0",
       "font-family": "Times New Roman"
    },

    The following image illustrates the applied font family for card value.

    Font family for card value

    Variation

    We can customize the below properties in variation section.

    • font-color
    • font-family

    For example, we can customize the font color for variation section. Below code snippet represent to change the font color.

  • js
  • "variation": 
    {
      "font-color": "green",
      "font-family": "Roboto",
    },

    The following image illustrates the applied font color for card variation.

    Font color for card variation

    Selection

    We can customize the highlight-color property in selection section.

    For example, we can customize the highlight color for selection. Below code snippet represent to change the highlight color.

  • js
  • "selection":
    {
     "highlight-color": "blue"
    },

    The following image illustrates the applied highlight color for card selection appearance.

    Highlight color for card selection

    FilterComboBox

    Sections

    We can customize the below sections in FilterComboBox widget.

    • Combobox
    • Button
    • DropDownList
    • Icon
    • Hover
    • SearchBox
    • Selection

    Combobox

    We can customize the below properties in combobox section.

    • background-color
    • border-color
    • font-color
    • font-family

    For example, we can customize the background color for combobox. Below code snippet represent to change the background color.

  • js
  • "combobox": 
    {
      "background-color": "green",
      "border-color": "#3c3d42",
      "font-color": "#f9f9f9",
      "font-family": "Roboto",
     },

    The following image illustrates the applied background color for combobox

    Background color for combobox

    Button

    We can customize the below properties in button section.

    • background-color
    • font-color
    • border-color

    For example, we can customize the background color for combobox. Below code snippet represent to change the background color.

  • js
  • "button": 
    {
      "background-color": "blue",
      "font-color": "#ffffff",
      "border-color": "none",
    },

    The following image illustrates the applied background color for dropdown button.

    Background color for dropdown button

    We can customize the below properties in dropdownlist section.

    • background-color
    • font-color
    • font-family

    For example, we can customize the font color for DropDownList. Below code snippet represent to change the font color.

  • js
  • "dropdownlist": 
    {
      "background-color": "#232428",
      "font-color": "pink",
      "font-family": "Roboto",
    },

    The following image illustrates the applied font color for DropDownList

    Applied font color for DropDownList

    Icon

    We can customize the below properties in icon section. This section is used for multi selection.

    • Background-color
    • Border-color
    • tick-color
    • search-icon-color

    For example, we can customize the background color for icon. Below code snippet represent to change the background color.

  • js
  • "icon": 
    {
      "background-color": "green",
      "border-color": "#ffffff",
      "tick-color": "#ffffff",
      "search-icon-color": "white"
    },

    The following image illustrates the applied background color for dropdown icon.

    Background color for dropdown icon

    Hover

    We can customize the ‘background-color’ property while hovering.

    For example, we can customize the background color while hovering. Below code snippet represent to change the background color.

  • js
  • "hover": 
    {
      "background-color": "red"
    },

    The following image illustrates the applied background color for DropDownList hovering effect.

    Background color for DropDownList hovering effect

    We can customize the ‘background-color’ property in searchbox section

    For example, we can customize the background-color in searchbox section. Below code snippet represent to change the background color.

  • js
  • "searchbox": 
    {
      "background-color": "blue"
    },

    The following image illustrates the applied background color DropDownList search box

    Background color DropDownList search box

    Selection

    We can customize the ‘background color’ property in selection

    For example, we can customize the background color in selection. Below code snippet represent to change the background color.

  • js
  • "selection": 
    {
      "background-color": "red"
    },

    The following image illustrates the applied background color for selection appearance in DropDownList.

    Background color for selection appearance in DropDownList

    Checkbox

    Sections

    We can customize the below sections in checkbox widget.

    • Label
    • Icon

    Label

    We can customize the below properties in label section

    • font-color
    • font-family

    For example, we can customize the font color in label. Below code snippet represent to change the font color.

  • js
  • "label": 
     {
       "font-color": "red",
       "font-family": "Roboto",
     },

    The following image illustrates the applied font color for checkbox label.

    Applied font color for checkbox

    Icon

    We can customize the below properties in icon section.

    • tick-color
    • border-color
    • background-color

    For example, we can customize the tick color in checkbox icon. Below code snippet represent to change the tick color.

  • js
  • "icon": 
    {
      "tick-color": "red",
      "background-color": "white",
      "border-color": "#232428",
    },

    The following image illustrates the applied tick color for icon.

    Applied tick color for icon

    NOTE

    Same theme settings was applied for RadioButton also.

    RangeSlider

    Sections

    We can customize the below sections in range slider.

    • Container
    • Range
    • Handle
    • Label

    Container

    We can customize the background-color property in container section.

    For example, we can customize the background color for range slider container. Below code snippet represent to change the background color.

  • js
  • "container": 
     {
       "background-color": "red",
     },

    The following image illustrates the applied background color RangeSlider container.

    Applied background color RangeSlider container

    Range

    We can customize the below properties in range section.

    • Range-color
    • Background-color

    For example, we can customize the range color for range section. Below code snippet represent to change the range color.

  • js
  • "range": 
    {
      "range-color": "blue",
      "background-color": "#2f3035"
    },

    The following image illustrates the applied range color for range slider.

    Applied range color for range slider

    Handle

    We can customize the below properties in handle section.

    • background-color
    • border-color

    For example, we can customize the background color for handle in range slider. Below code snippet represent to change the background color.

  • js
  • "handle": 
    {
      "background-color": "red",
      "border-color": "#353535",
    },

    The following image illustrates the applied background color for range slider handle.

    Applied background color for range slider handle

    Label

    We can customize the font-color for the label.

    Below code snippet represent to change the font color.

  • js
  • "label": 
    {
     "font-color": "green"
    },

    The following image illustrates the applied font color for range slider label.

    Applied font color for range slider label

    Listbox

    Sections

    We can customize the below sections in listbox widget.

    • Listbox
    • Icon
    • Hover

    Listbox

    We can customize the below properties in listbox section

    • background-color
    • color

    For example, we can customize the background color for listbox. Below code snippet represent to change the background color.

  • js
  • "listbox": 
    {
     "background-color": "pink",
     "color": "#7a7e89",
    },

    The following image illustrates the applied background color for listbox.

    Background color for listbox

    Icon

    We can customize the below properties in icon section.

    • background-color
    • border-color
    • tick-color

    For example, we can customize the background color for listbox icon while enable multi selection. Below code snippet represent to change the background color.

  • js
  • "icon": 
    {
     "background-color": "green",
     "border-color": "#232428",
     "tick-color": "#232428",
    },

    The following image illustrates the applied background color for listbox multi select icon.

    Background color for listbox multi select icon

    Hover

    We can customize the ‘background-color’ while hovering.

    For example, we can customize the background color for listbox while hovering. Below code snippet represent to change the background color.

  • js
  • "hover": 
    {
      "background-color": "red",
    },

    The following image illustrates the applied background color for listbox hover.

    Applied background color for listbox hover

    Datepicker

    Sections

    We can customize the below sections in datepicker widget.

    • Textbox
    • Calendar
    • Selection
    • Hover
    • Icon
    • Footer
    • Button

    TextBox

    We can customize the below properties in textbox section.

    • background-color
    • border-color
    • font-color

    For example, we can customize the border color for textbox in datepicker. Below code snippet represent to change the border color.

  • js
  • "textbox": 
    {
     "background-color": "#18191d",
     "border-color": "red",
     "font-color": "f9f9f9"
    },

    The following image illustrates the applied border color for datepicker textbox.

    Applied border color for datepicker textbox

    Calendar

    We can customize the below properties in calendar section.

    • background-color
    • border-color
    • currentmonth-font-color
    • week-header-color
    • days-color
    • othermonth-font-color

    For example, we can customize the background color for calendar in datepicker. Below code snippet represent to change the background color.

  • js
  • "calendar": 
    {
     "background-color": "pink",
     "border-color": "#333842",
     "currentmonth-font-color": "white",
     "week-header-color": "#7a7e89",
     "days-color": "white",
     "othermonth-font-color": "#333842"
    },

    The following image illustrates the applied background color for calendar.

    Applied background color for calendar

    Selection

    We can customize the ‘background-color’ for selection

    For example, we can customize the background color for selection in datepicker. Below code snippet represent to change the background color.

  • js
  • "selection": 
    {
      "background-color": "green"
    },

    The following image illustrates the applied background color for selection appearance .

    Applied background color for selection appearance

    Hover

    We can customize the ‘background-color’ for hovering.

    For example, we can customize the background color while hovering in datepicker. Below code snippet represent to change the background color.

  • js
  • "hover": 
    {
      "background-color": "red"
    },

    The following image illustrates the applied background color for hovering effect.

    Applied background color for hovering effect

    Icon

    We can customize the below properties in icon section

    • arrow-color
    • background-color

    For example, we can customize the arrow color in datepicker. Below code snippet represent to change the arrow color.

  • js
  • "icon": 
    {
      "arrow-color": "red",
      "calendar-color": "#ffffff",
    },

    The following image illustrates the applied arrow color for datepicker.

    Applied arrow color for datepicker

    We can customize the ‘background-color’ for footer.

    For example, we can customize the background color for footer in datepicker widget. Below code snippet represent to change the background color.

  • js
  • "footer": 
    {
      "background-color": "green",
    },

    The following image illustrates the applied footer color for datepicker.

    Applied footer color for datepicker

    Button

    We can customize the below properties in button section.

    • applybutton-color
    • applybutton-font-color
    • cancelbutton-color
    • cancelbutton-font-color

    For example, we can customize the apply button color. Below code snippet represent to change the apply font color.

  • js
  • "button": 
    {
      "applybutton-color": "red",
      "applybutton-font-color": "white",
      "cancelbutton-color": "#f4f4f4",
      "cancelbutton-font-color": "#161616"
    },

    The following image illustrates the applied apply button color for datepicker.

    Applied apply button color for datepicker

    Bubble map

    Sections

    We can customize the below sections in bubble map.

    • Shape
    • Hover
    • Bubble

    Shape

    We can customize the below properties in shape section.

    • background-color
    • border-color

    For example, we can customize the background color for shape. Below code snippet represent to change the background color.

  • js
  • "shape": 
    {
      "background-color": "green",
       "border-color": "#181a1e",
    },

    The following image illustrates the applied background color for map shape

    Applied background color for map shape

    Hover

    We can customize the below properties while hovering

    • background-color
    • border-color

    For example, we can customize the border color while hovering. Below code snippet represent to change the border color.

  • js
  • "hover": 
    {
      "background-color": "red",
      "border-color": "blue",
    },

    The following image illustrates the applied border color for hovering effect.

    Applied border color for hovering effect

    Bubble

    We can customize the ‘background-color’ for bubble.

    For example, we can customize the background color. Below code snippet represent to change the background color.

  • js
  • "bubble": 
    {
      "background-color": "green",
    },

    The following image illustrates the applied background color for map bubbles.

    Applied border color for map bubbles

    ChoroplethMap

    Sections

    We can customize the below sections in ChoroplethMap widget.

    • Shape
    • Hover
    • Range

    Shape

    We can customize the below properties in shape section.

    • background-color
    • border-color

    For example, we can customize the background color for shape. Below code snippet represent to change the background color.

  • js
  • "shape": 
    {
      "background-color": "pink",
      "border-color": "#181a1e",
    },

    The following image illustrates the applied background color for map shape.

    Applied background color for map shape

    Hover

    We can customize the below properties while hovering.

    • Background-color
    • Border-color

    For example, we can customize the border color while hovering. Below code snippet represent to change the border color.

  • js
  • "hover": 
    {
      "background-color": "red",
      "border-color": "green",
    },

    The following image illustrates the applied border color for hovering.

    Applied border color for hovering

    Range

    We can customize the ‘background-color’ for range. For this we need to enable equal color mapping option.

    For example, we can customize the background color for range. Below code snippet represent to change the background color.

  • js
  • "range": 
    {
      "background-color": ["red", "blue", "green", "pink"]
    },

    The following image illustrates the applied background color for range.

    Applied background color for range

    TreeMap

    Sections

    We can customize the below sections in TreeMap widget.

    • drilldownhover
    • select
    • drilldownheader
    • rangecolormap
    • desaturatecolor

    DrillDownHover

    We can customize the ‘background color’ property in drilldownhover section.

    For example, we can customize the background color for drilldown hover. Below code snippet represent to change the background color.

  • js
  • "drilldownhover": 
    {
      "background-color": "red",
    },

    The following image illustrates the applied background color for TreeMap drilldown hover.

    Background color for TreeMap drilldown hover

    Select

    We can customize the ‘border-color’ property for selection appearance.

    For example, we can customize the border color. Below code snippet represent to change the border color.

  • js
  • "select": 
    {
      "border-color": "red",
    },

    The following image illustrates the applied border color for selection appearance.

    Applied border color for selection appearance

    DrillDownHeader

    We can customize the ‘background-color’ property for drilldown header.

    For example, we can customize the background color. Below code snippet represent to change the background color.

  • js
  • "drilldownheader": 
    {
      "background-color": "pink",
    },

    The following image illustrates the applied background color for drilldown header.

    Background color for drilldown header

    RangeColorMap

    We can customize the ‘background-color’ for range color map.

    For example, we can customize the background color. Below code snippet represent to change the background color.

  • js
  • "rangecolormap": 
    {
      "background-color": ["pink", "yellow", "orange"],
    },

    The following image illustrates the applied background color for range color map.

    Background color for range color map

    DesaturateColor

    We can customize the ‘background-color’ for desaturated color in TreeMap widget.

    For example, we can customize the background color. Below code snippet represent to change the background color.

  • js
  • "desaturatecolor": 
    {
      "background-color": "pink"
    },

    The following image illustrates the applied background color for desaturated color.

    Background color for desaturated color

    RangeNavigator

    Sections

    We can customize the below sections in RangeNavigator widget.

    • Tooltip
    • Selected
    • Unselected
    • Border

    Tooltip

    We can customize the below properties in tooltip section.

    • Background-color
    • font-color

    For example, we can customize the background color for tooltip. Below code snippet represent to change the background color.

  • js
  • "tooltip": 
    {
     "background-color": "green",
     "font-color": "red"
    },

    The following image illustrates the applied background color for tooltip.

    Background color for tooltip

    Selected

    We can customize the ‘background-color’ for selected portion in RangeNavigator.

    For example, we can customize the background color. Below code snippet represent to change the background color.

  • js
  • "selected": 
    {
      "background-color": "pink",
    },

    The following image illustrates the applied background color for selected region.

    Applied background color for selected region

    Unselected

    We can customize the background-color for unselected region in RangeNavigator.

    For example, we can customize the background color. Below code snippet represent to change the background color.

  • js
  • "unselected": 
    {
      "background-color": "green",
    },

    The following image illustrates the applied background color for unselected region.

    Applied background color for unselected region

    Border

    We can customize the border-color for RangeNavigator.

    For example, we can customize the border color. Below code snippet represent to change the border color.

  • js
  • "border": 
    {
      "border-color": "red",
    },

    The following image illustrates the applied border color for border.

    Applied border color for border

    Gauge

    Sections

    We can customize the below sections in gauge widget.

    • Range1
    • Range2
    • Data

    Range1

    We can customize the below properties in range1 section.

    • background-color
    • border-color

    For example, we can customize the background color. Below code snippet represent to change the background color.

  • js
  • "range1": 
    {
     "background-color": "green",
     "border-color": "red"
     },

    The following image illustrates the applied background color for range1.

    Applied background color for range1

    Range2

    We can customize the below properties in range2 section.

    • Background-color
    • border-color

    For example, we can customize the border color. Below code snippet represent to change the border color.

  • js
  • "range2": 
    {
    "background-color": "yellow",
     "border-color": "blue"
    },

    The following image illustrates the applied background color for range2.

    Applied background color for range2

    Data

    We can customize the font-color in data section.

    Below code snippet represent to change the font color.

  • js
  • "data": 
    {
      "font-color": "green"
    },

    The following image illustrates the applied font color for data.

    Applied font color for data

    Chart

    Sections

    We can customize the below sections in chart widget.

    • X-axis
    • Y-axis
    • Axes
    • Series
    • Tick
    • Legend

    X-axis

    We can customize the below properties in x-axis section

    • xaxisline-color
    • primaryxaxis-majorgridlines
    • primaryxaxis-fontcolor
    • primaryxaxis-titlecolor

    For example, we can customize the primary x-axis font color for x-axis. Below code snippet represent to change the font color.

  • js
  • "x-axis": 
    {
      "xaxisline-color": "#484c54",
      "primaryxaxis-majorgridlines": "yellow",                                              
      "primaryxaxis-fontcolor": "green ",
      "primaryxaxis-titlecolor": "#636363 "
    },

    The following image illustrates the primary x-axis font color.

    Primary x-axis font color

    Y-axis

    we can customize the below properties in y-axis section.

    • yaxisline – color
    • primaryyaxis-majorgridlines
    • primaryyaxis -fontcolor
    • primaryyaxis- titlecolor

    For example, we can customize the primary y-axis font color for y-axis. Below code snippet represent to change the font color.

  • js
  • "y-axis": 
    {                         
      "yaxisline-color": "#484C54",
      "primaryyaxis-majorgridlines": "#484C54",
      "primaryyaxis-fontcolor": "blue",
      "primaryyaxis-titlecolor": "#636363"
    },

    The following image illustrates the primary y-axis font color.

    Primary y-axis font color

    Axes

    we can customize the axis line color for secondary axis.

    Below code snippet represent to change the axis line color.

  • js
  • "axes": 
    {
      "axisline-color": "red"
    },

    The following image illustrates applied axis line color.

    Applied axis line color

    Series

    We can customize the below properties in series section.

    • Background-color
    • font-color

    For example, we can customize the background color. Below code snippet represent to change the background color.

  • js
  • "series": 
    {
      "background-color": ["green"],
      "font-color": "red"
    },

    The following image illustrates the applied series font-color.

    Applied series font-color

    Tick

    We can customize the major tick color in tick section.

    Below code snippet represent to change the tick color.

  • js
  • "tick": 
    {
      "majortick-color": "red",                       
    },

    The following image illustrates the applied tick color.

    Applied tick color

    Legend

    We can customize the legend font color property in legend section.

    For example, we can customize the legend font color. Below code snippet represent to change the legend font color.

  • js
  • "legend": 
    {
      "legendfont-color": "red"
    },

    The following image illustrates the applied legend font color.

    Applied legend font color

    ComboChart

    Sections

    We can customize the below sections in ComboChart widget.

    • X-axis
    • y-axis
    • Series
    • Points

    X-axis

    We can customize the below properties in x-axis section

    • font-color
    • title-color

    For example, we can customize the font color. Below code snippet represent to change the font color.

  • js
  • "x-axis": 
    {
     "font-color": "blue",
     "title-color": "blue"
    },

    The following image illustrates the applied x-axis font-color.

    Applied x-axis font-color

    Y-axis

    We can customize the below properties in y-axis section

    • font-color
    • title-color

    For example, we can customize the title color. Below code snippet represent to change the title color.

  • js
  • "y-axis": 
    {
      "font-color": "green",
      "title-color": "red"
    },

    The following image illustrates the applied y-axis title color.

    Applied y-axis title color

    Series

    We can customize the below properties in series section

    • background-color
    • font-color

    For example, we can customize the background color for series and line. Below code snippet represent to change the background color. First one is bar color and second one is line color.

  • js
  • "series": 
    {
     "background-color": ["pink", "red"],
     "font-color": "yellow"
    },

    The following image illustrates the applied series background color.

    Applied series background color

    NOTE

    We did not provide API for height and width customization due to consideration on view of the layout.

    • By using the API “beforeWidgetRender” we can apply customized theme to the widgets.
  • js
  • $('#dashboard').ejDashboardViewer(
            {
                serviceUrl: '@ViewBag.ServiceUrl.ToString()',
                dashboardPath: '@ViewBag.FirstDashboardPath',
                filterParameters: location.search.substr(1),
                enableCustomTheming: true,
                customThemeSettings: themes,
                beforeWidgetRender: ApplyTheme
            });
    • We can apply specific theme which we defined in “widgetThemeSettings” to a widget using the following code snippet.
  • js
  • function ApplyTheme(e) {
            	if (e != null && e.data != null) {
                	if (e.data.controlType == "Grid") {
                    		this.applyCustomTheme(e.data, "Theme1");
               		 }
           		}
        	};
    • The following image represents “Theme1” settings is applied to Grid widget in dashboard.

    Theme applied to Grid widget

    How to apply different themes to same widget type

    • We can create multiple theme settings for a widget likewise “Theme1” generate under “widgetThemeSettings”.

    • Different themes can be applied to same type of widgets by using the following code snippet.

  • js
  • function ApplyTheme(e) {
    if (e != null && e.data != null) {
    if (e.data.controlType == "Grid" && e.data.reportName == "Grid_1") {
    this.applyCustomTheme(e.data, "Theme1");
    }
    if (e.data.controlType == "Grid" && e.data.reportName == "Grid_2") {
    this.applyCustomTheme(e.data, "Theme2");
    }
    }
    };
    • The following image represents “Theme1” and “Theme2” settings is applied to Grid widget. Grid showcased with different font style in the dashboard.

    Theme1 and Theme2 settings