# Global Chart Interaction & Professional Rendering Standard

Phase: H11.0-P11.1-R22

## Mandatory rendering standard

All major user-facing charts in the Hospital Executive Dashboard use the locally bundled professional chart engine:

- **Apache ECharts 6.1.0**
- Local asset: `public/assets/vendor/echarts/echarts.min.js`
- Shared adapter: `public/assets/js/ddb-echarts-adapter.js`
- No CDN dependency is required at runtime.

The previous HTML/canvas implementation remains in the DOM as a fallback and is hidden only after a successful professional chart render.

## Mandatory interaction rule

For every user-facing chart:

- Hovering with mouse/pointer over a bar, column, point, pie slice, donut segment, or other chart element must display a clear tooltip.
- Tooltip shows the business label, series when applicable, full actual value, and percentage when applicable.
- Touch/pointer tap must provide equivalent access on mobile/tablet.
- No technical field names, query names, schema names, or developer language may appear in tooltips.
- Value formatting must be human-readable while exact values remain available in the tooltip.

## Scope covered in R22

- Revenue monthly comparison charts.
- Visits and patient activity charts.
- Operations charts.
- Lab and radiology charts.
- Doctors charts.
- Beds and capacity charts.
- Specialty Finance horizontal ranking charts.
- Revenue composition donut.
- Daily Inpatient Revenue payer donut.
- Daily Inpatient Revenue care-area revenue bars.
- Executive dashboard occupancy donut and unit bars.
- Executive dashboard specialty ranking bars.
- Action Center activity trend chart.
- Action Center review-status donut.
- Action Center reviewed-actions ranking.
- Reusable daily-bar and rank-list visualizations.

Compact micro-indicators that are intentionally not standalone charts remain lightweight HTML for density and performance, but they inherit the same exact-value tooltip interaction standard.

This is a permanent UI governance rule for all future charts.