iOS Inspired Minichart - Documentation (O11)

Stable version 1.0.0 (Compatible with OutSystems 11)

Uploaded

on 3 Apr (19 hours ago)

0.0

(0 ratings)

Documentation

1.0.0

Mini Chart Component Documentation (iOS Inspired)

Overview

The Mini Chart Component is a lightweight, high-performance sparkline generator for OutSystems Reactive and Mobile applications. Its design is heavily inspired by iOS data visualization, focusing on elegance, fluid curves, and a clean aesthetic.

Key Features

iOS Aesthetic: Clean, minimalist lines with optional Bezier smoothing for a premium "Apple-style" look.
Fully Responsive: Automatically adapts to container size changes.
Mobile Optimized: Uses requestAnimationFrame and DevicePixelRatio for crisp, high-definition rendering on Retina displays.
Zero Dependencies: No external libraries required.

Input Parameters

Parameter	Type	Description
WidgetId	Text	The Unique ID of the chart's parent container (passed via `Container.Id`).
DataJSON	Text	A JSON string: `[{"Value": 10}, {"Value": 25}, ...]`
LineColor	Text	HEX/RGBA color (e.g., `#2563eb`). Matches iOS system colors well.
LineThickness	Integer	Line width in pixels. Default is `2`.
IsSmooth	Boolean	Set to `True` for the signature iOS curved look.
BackgroundStyle	Text	Set to `"Dashed"` for subtle grid lines.
BackgroundColor	Text	Background color of the chart area.

Technical Behavior

Retina Ready: The component detects the screen's pixel density to ensure that lines look as sharp as native iOS components.
Resilience: Built to handle the "Virtualization" of OutSystems lists, ensuring the chart renders correctly as the user scrolls.

Design Tips

To achieve the most authentic iOS look:

Set IsSmooth to True.
Use a LineThickness of 2.
Use semi-transparent colors for the background if using the "Dashed" style.
Ensure the LineColor has good contrast against the background.