What's New in ActiveReportsJS 5.2

We are excited to announce the release of the newest version of ActiveReportsJS, version 5.2. This update includes several improvements and new features that will continue to enhance your reporting experience. New features include:

• The updated Chart Report Item
• Report Viewer Theming
• Report Stylesheets

Ready to check it out? Download ActiveReportsJS Today!

Revamped Chart Report Item

ActiveReportsJS v5.2 introduces a completely revised Chart Report Item, offering greater flexibility and configurability across all aspects of chart design. From data binding to legend customization, the new chart model provides more dynamic options to better suit various reporting needs.

• Enhanced Configurability—Every aspect of the chart, including data binding, axis setting, labels, and legend items, is now more customizable by using dynamic expressions.
• Seamless Migration—Existing charts are automatically converted to the new model when an older report is opened in the designer, ensuring a smooth transition without the need for manual adjustments.

This update simplifies the chart configuration process while providing more control over data visualization, making it easier to create clear and insightful reports.

Report Viewer Theming

ActiveReportsJS now provides built-in theming support for the Report Viewer component, allowing seamless customization of its appearance.

• Built-In Color Themes - Choose from predefined themes, including light, dark, high-contrast, and system-adaptive options.
• Theme Selector - Enables users to switch themes directly from the viewer’s toolbar.
• Custom Themes API - Define and apply custom color themes to match application branding.
• Runtime Theme Switching - Change the viewer’s theme dynamically using the API.

Using themeConfig API

The themeConfig property of the Report Viewer allows you to:

• Set the initial theme
• Enable or disable the theme selector
• Define which themes are available in the theme selector

var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host", {
  themeConfig: {
    // Sets the initial theme
    initialTheme: 'ActiveReports',
    themeSelector: {
      // Enables or disables the theme selector
      isEnabled: true,
      // Defines available themes in the selector
      availableThemes: ['ActiveReports', 'ActiveReportsDark']
    }
  }
});

Switching Themes at Runtime

To switch a theme at runtime, you can use the theme property of the report viewer:

var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host");
viewer.theme = 'ActiveReportsDark';

Creating a Custom Theme

The full example of a defined custom theme is shown below:

const myCustomTheme = {
    name: "CustomBlue",
    type: "light", // "light" or "dark"
    backgroundMain: "#f0f4f8", // Main background color
    backgroundPanels: "#d9e2ec", // Panel background color
    primary: {
        veryLight: "#d1e8ff",
        light: "#a3d4ff",
        lighter: "#75bfff",
        lightMedium: "#47abff",
        medium: "#1a97ff",
        base: "#0084ff", // Primary base color
        darkMedium: "#0072db",
        darker: "#005fb7",
        dark: "#004c93",
        veryDark: "#00396f"
    },
    secondary: "#ffcc00", // Can be a single color or shades
    neutral: {
        base: "#6b7280",
        light: "#d1d5db",
        dark: "#374151"
    },
    error: "#e63946", // Error color
    warning: "#ff9f1c", // Warning color
    fontFamily: "Arial, sans-serif" // Custom font
};

Report Stylesheets

You can now simplify and standardize your report designs in ActiveReportsJS using Report Stylesheets and their associated features:

• Reusable Stylesheets—Define a stylesheet once and apply it across multiple reports.
• Flexible Storage—Save stylesheets externally or embed them in reports.
• Dynamic Binding—Use static names or expressions to apply stylesheets and styles dynamically.
• Customizable Styles—Override specific properties for fine-tuned controls.

Creating A Stylesheet

To create a new External Stylesheet, run the Standalone Report Designer and select File > New > Stylesheet:

If you want to add an Embedded Stylesheet, you can add the new item to the Embedded Stylesheets collection of the Report properties:

Both options will open the Stylesheet Editor dialog:

Saving Stylesheets

When creating a stylesheet, the options for saving are dependent on whether the stylesheet was created as an external sheet or embedded:

• External Stylesheet—Clicking the Save button opens the Save File Dialog, allowing you to save the stylesheet as an external file that can be used across multiple reports.
• Embedded Stylesheet—Clicking the Save button rewrites the embedded stylesheet within the report template, preserving changes locally.

Additionally, you can export an embedded stylesheet to an external file by selecting the Export option in the embedded stylesheet editor's Save button drop-down. This is useful for sharing or reusing styles in other reports.

Attaching Stylesheets to Reports

To bind a stylesheet to a report, use the Stylesheet property in the report properties:

• Source—Specifies whether the stylesheet is Embedded or Shared.
• Value—An expression that evaluates to the name (when the Source is embedded) and to the external resource name or URL (when the Source is shared).

Applying Styles to Report Items

Once the stylesheet is attached, you can use the Style Name property of the report items to select a predefined appearance:

Ready to try it out? Download ActiveReportsJS Today!

You can access the new version of ActiveReportsJS by downloading the files from our site, referencing our latest CDN links in your application, or installing our packages from NPM. For more information on these new features, check out our What’s New page. Happy coding!