Charting Data
In Appex Now, charts are the primary way we visualize key metrics across our applications – from inventory levels and sales pipelines to credit risk scores. The Charting Data pattern ensures that complex data is communicated clearly and responsively.
Charts as Core UI Elements:
We treat charts as first-class UI elements, the customer app might show purchase histories, the dealer app visualizes sales trends, the inventory manager displays stock levels over time, and the credit decision engine plots applicant scores and loan performance.
Clarity at First Glance:
Our design intent was to make charts immediately understandable. Only the most essential data is shown by default, and details can be exposed on demand. This avoids overwhelming the user and aligns with best practices (e.g. “Keep a chart simple… Resist the temptation to pack as much data as possible… too much data can make a chart visually overwhelming”
Designing Data Narratives:
In practice, we chose chart types that match the data’s story. For example:
A pie chart for comparing categories, (regions, models, etc.)
A bar chart for comparing time-series sales trends.
We also ensure charts fit seamlessly into each app. In the inventory tool, charts resize with the browser and allow filtering. In the credit engine, dashboards group related charts and highlight critical KPIs at the top-left where eyes land.
Consistency Across Contexts:
Across Appex Now, we reuse visual language (colours, axes, gridlines) so that engineers, managers, and dealers feel at home when switching contexts. As Apple’s guidelines advise, we “keep charts simple” and let users explore details via tooltips or drill-downs.
Bar Chart Axis
Pie Chart
Best Practices
Clear, Readable Labels and Legends:
Every axis and data series should be labeled succinctly (avoid acronyms or jargon) so users immediately grasp what’s plotted.
Avoid Clutter:
Only surface the most important data by default. As one guideline puts it, avoid “packing as much data as possible into a chart” instead highlight key trends and let users filter or drill down for more.
Right Chart Type For The Task:
Match visualization to the data story – e.g. use line charts for trends, bar charts for category comparisons, and pie/treemap for part-to-whole (see material on chart selection.
Accessible Colors & Consistent Styling:
Use color thoughtfully (e.g. one color per series, avoid red/green for critical info) and ensure all text and shapes meet accessibility contrast ratios.
Group Related Charts Into Dashboards:
Place the highest-level metrics (KPIs) at the top or top-left. Group similar data together so users can quickly compare related visuals. Keep each dashboard to one screen when possible to avoid scrolling.