Chart Compatibility

Chart Compatibility

Batoi UIF charts are dependency-free SVG renderers for server-rendered and RAD-friendly application screens. The chart package supports a practical business dashboard subset and accepts a Flint-compatible input shape at the specification boundary.

UIF is **Flint-compatible, not Flint-complete**. Flint chart specs that map to native UIF chart types render in the browser with UIF's SVG engine. Unsupported Flint chart types emit warnings and render a simple bar fallback only so pages remain resilient.

Native UIF Chart Types

Flint Name Mapping

Unsupported Flint Types

Unsupported Flint chart names do not fail the page. The adapter:

• returns a warning in FlintChartAdapterResult.warnings
• sets data-uif-chart-warnings during declarative hydration
• renders a bar fallback when possible

This keeps server-rendered dashboards resilient while still making capability gaps explicit for developers.

Advanced flow, hierarchy, network, and planning visuals are intentionally outside chart core for now:

• Sankey and Alluvial need deterministic layout, node ordering, collision avoidance, and link routing. They may belong in an optional advanced chart package or server-rendered SVG flow.
• Sunburst is deferred until hierarchy-chart demand exceeds what treemap covers.
• Network belongs to a separate graph/layout capability, not the chart package.
• Gantt belongs to a future planning/timeline component with scheduling, dependencies, scrolling, and editing behavior.

QA Checklist

Use this checklist before accepting a new chart type or chart-family change:

• Verify the gallery card at desktop width.
• Verify the gallery card at a mobile width.
• Verify dark theme rendering if the host theme enables it.
• Verify high-contrast readability for marks, labels, legends, and grid lines.
• Verify keyboard focus when focusable or drill-down behavior is enabled.
• Verify SVG export.
• Verify PNG export.
• Verify the table fallback when table output is enabled.
• Verify Flint mapping status is documented as supported, deferred, or unsupported.

Release Checklist

Every chart addition should ship with:

• native renderer coverage in packages/charts/src/index.test.ts
• declarative gallery example in examples/chart-gallery/index.html
• README chart-family mention
• Flint compatibility matrix update
• generated package and root dist output
• focused package build and chart tests
• root distribution build when browser-facing output changes

Example

<div
  data-uif="chart"
  data-uif-chart-format="flint"
  data-uif-data='[{"quarter":"Q1","revenue":120},{"quarter":"Q2","revenue":180}]'
  data-uif-chart-spec='{"chartType":"Line Chart","encodings":{"x":{"field":"quarter"},"y":{"field":"revenue"}}}'
></div>