Mastering B‑End Chart Design: Visual Hierarchy, Layout, and Color Strategies

Chart Visual Hierarchy

Charts contain abundant data and visual elements; relying solely on aesthetic preference can hide critical information. We classify chart elements into three layers—base, middle, and top—according to importance and assign each a corresponding visual intensity.

Base Layer Design

Axes, tick marks, and other auxiliary elements are treated as base layer and rendered in light gray. Experiments showed that a contrast ratio of about 1.6:1 with the background provides sufficient visibility without drawing attention.

Middle Layer Design

Data graphics, lines, and other primary data‑carrying elements belong to the middle layer. They use slightly lower brightness but higher saturation to stand out, with gradients, strokes, and other styles added for visual richness.

Top Layer Design

Highlights such as hover styles and detailed data explanations form the top layer. They employ dark gray or accent colors with strong contrast, supplemented by animation or shadow to ensure the information is prominently conveyed.

Chart Layout Design

We define three typical scenarios—overview, multi‑angle view, and detailed analysis—and propose three chart sizes: mini, medium, and large. Mini charts drop axes and unnecessary information, limiting data density; medium charts restrict tick count and data points (e.g., one point per 4 px, max five Y‑axis ticks); large charts show full detail without density limits.

When multiple chart types are mixed, fill‑type charts (pie, map) tend to appear visually heavier than line or bar charts; we therefore reduce their actual height to maintain visual balance.

Legend Placement Guidelines

Consistent legend placement reduces browsing cost. For left‑right aligned charts (line, bar), place the legend on top to align with titles and other elements. For charts with side space (pie), place the legend on the right to save page space.

Data Color Palette Design

We balance recognizability and consistency by controlling two key dimensions. Recognizability is achieved by adjusting brightness and combining hue changes with brightness variations (e.g., deep red vs. bright orange). Consistency is ensured by limiting brightness to 50‑70% and saturation to 75‑85% while allowing variation within that range.

To quantify colors, we adopt the HCL color model (Hue, Chroma, Lightness), which maps human perception to numeric values and outperforms RGB/HSB for data visualization. We provide a Sketch plugin and online tools (e.g., iwanthue) for generating HCL‑based palettes, as well as a color‑review utility for accessibility checks.

Conclusion

Effective chart design maximizes data value by making patterns obvious, improving readability, and ensuring B‑end users can easily understand complex data.