Chart Background Image with Transparency

Charts with Transparent Backgrounds Example using JavaScript

Overview

This example demonstrates how to create a SciChart.js chart with a fully transparent background. By setting the chart's background to "Transparent", the underlying DOM—such as a CSS background image—can be seen, enabling rich visual integrations for custom-themed web applications.

Technical Implementation

Implemented in JavaScript, the chart is initialized asynchronously using the SciChartSurface.create() method. Performance is optimized through the use of WebAssembly (wasmContext), ensuring fast rendering and high responsiveness. The numeric axes are configured with custom grid lines, band fills, and label styles as detailed in the Axis Styling: Title, Labels, Gridlines and Axis Band Style documentation. The transparent background is applied by setting sciChartSurface.background to "Transparent", a technique explained in the Transparent Background documentation.

Features and Capabilities

The chart incorporates several renderable series including a spline line, bubble, and column series. Each series utilizes dynamic animations—such as SweepAnimation and WaveAnimation — to create engaging visual effects, a concept described in the Series Startup Animations documentation. Additionally, interactive modifiers like ZoomPanModifier, MouseWheelZoomModifier, and ZoomExtentsModifier are added to enable smooth real-time navigation and user interaction.

Integration and Best Practices

This example follows best practices for high-performance charting by leveraging the WebAssembly context for rendering efficiency. Data series are configured using clear JSON-style setups, making it straightforward to modify and extend the chart's functionality as needed. Developers can refer to the Working with Data documentation for more details on customizing series and interactivity. Overall, this transparent background example serves as a solid reference for integrating SciChart.js into JavaScript projects requiring advanced styling and seamless background integration.