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:
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
Property | Type | Description |
name | string | A unique name for the theme. |
type | "light" or "dark" | Defines whether the theme is a light or dark theme. |
backgroundMain | string | The primary background color. |
backgroundPanels | string | The background color of panels inside the Viewer. |
primary | string or shades | The main accent color—either a single color or a set of shades. |
secondary | string or shades (optional) | A secondary accent color for additional UI elements. |
neutral | string or shades (optional) | Neutral tones for balancing UI contrast. |
error | string or shades (optional) | Color used for error messages or indicators. |
warning | string or shades (optional) | Color used for warnings or alerts. |
fontFamily | string (optional) | Specifies the font used throughout the Viewer. |
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!