Lieflat Charts: 61 Chart Types and 12 Report Templates That Let AI Directly Generate Beautiful, Striking HTML Charts and Reports

When writing business reviews, user research summaries, product white papers, or long-form posts, the hardest challenge is rarely "how to draw a bar chart"—it is choosing the right form of expression for your data shape, reading time, and publishing context. The exact same dataset can be turned into a weekly report chart meant to be scanned in three seconds, or expanded into an editorial narrative visualization that preserves every single record. Choose the wrong format, and even the most polished styling will compromise understanding.

Lieflat Charts is a template-driven Agent Skill. It bundles a chart catalog, selection rules, visual syntax, and reusable HTML/SVG implementations into a single repository. This allows agents capable of reading SKILL.md—such as Moxt, Claude Code, and Codex—to take data and scenario descriptions in natural language and generate build-free, single-file HTML charts or reports that open directly in any browser.

From Installation to Chart Selection: Master These Four Rules First

Lieflat Charts does not require you to configure a complex local build environment. All charts are fundamentally lightweight web code: once written by an AI, they can be opened directly in a browser with a double-click for viewing or screenshot capture.

Installation and Loading Methods

If you use an AI terminal that supports skill extensions (such as Codex, Claude Code, or Moxt), you only need to run a single installation command in your terminal:

npx skills add https://github.com/larashero3-dotcom/lieflat-charts --skill lieflat-charts

Alternatively, you can download or clone the repository directly into your local skills directory (for instance, ~/.codex/skills/lieflat-charts or ~/.claude/skills/lieflat-charts). After installation, verify that the directory contains the primary rules file SKILL.md, the templates directory templates/, the chart catalog catalog.md, and the design tokens mono-tokens.js.

Before using it, pay attention to the licensing boundary: the repository uses the PolyForm Noncommercial License 1.0.0, which is not a general open-source license. It may be used, modified, and distributed according to its terms for non-commercial purposes; if you intend to use it in commercial projects, read the full LICENSE file in the repository first and confirm the necessary permissions with the rights holder.

Chart Mode vs. Report Mode Boundaries

Lieflat Charts strictly separates two generation modes, with Chart Mode enabled by default:

• Chart Mode (Default State): Suited for article illustrations, social media graphics, or specific data takeaways. A single short article typically includes 1 chart; two to three core arguments warrant 2–3 charts; and long-form articles or research reports of 10,000 words or more typically use 4–6 charts. By default, a single page displays at most 6 charts. Plotting the same conclusion in different chart types merely to pad page length is strictly prohibited.
• Report Mode (Requires Explicit Activation): Only when you explicitly prompt the AI with full-page delivery requests—such as "make an annual report, a survey one-pager, a white paper, a monthly dashboard, or a data poster"—will the AI load the composite layout templates (R01–R12). In Report Mode, the AI strictly follows the full-page layout skeleton and will never stitch together unrelated templates haphazardly.

Selection Priority and Primary vs. Fallback Mechanisms

To maintain information density and aesthetic elegance, Lieflat Charts establishes an unbending selection filtering funnel:

1. First Priority: Fully review Lupi Editorial. First examine whether the data can be expanded using hairlines, dot matrices, individual records, negative space, and side notes. "Lupi style" here refers specifically to the visual syntax within the repository's gallery, rather than an imitation of Giorgia Lupi's personal hand-drawn style.
2. Second Priority: Review the Lupi Basics group. If the dataset is small and categories are sparse, but you still want to preserve the hairline and tick-mark tactile quality, look for variants of classic chart types here.
3. Third Priority: Fall back to the Glance series. Only when the first two groups cannot clearly convey the data, or when you explicitly request a format "for a monitoring dashboard, weekly report card, or something readable in 3 seconds," is the heavy-stroke, highly aggregated Glance series permitted.
4. Special Note: Maps require explicit requests only. Even if your data contains city, province, or country names, do not draw a map by default. Maps are invoked only when you explicitly emphasize "draw a geographic distribution map."

Throughout the system, L1–L15 and F1–F13 constitute the primary roster for routine chart generation. Most remaining numbered charts serve as fallbacks and should only be used when the primary roster cannot convey the data. The only exceptions are F15 (Tick Box), F16 (Stream Ribbon), F17 (Candlestick), L17 (Calendar Heat), and L20 (Parallel Coordinates); because the primary library lacks equivalent mathematical encodings for these forms, they may be selected immediately whenever the data structure is an exact fit.

Color Systems and Offline Execution Rules

Within the same article or report, the entire piece must be strictly locked to a single cohesive color scheme. You must not clash red and blue in one chart while switching to grass green in another:

• Mono (Minimalist Grayscale): The default baseline palette. It relies on line weight and luminance to create hierarchy, making it the most timeless option with the highest layout fault tolerance.
• Porcelain (Celadon Blue): A monochromatic ramp that relies on tonal depth variations to express ordered values or a single continuous metric.
• Palm (Palm Green): A muted, low-saturation yellow-green palette designed specifically to distinguish a small number of unordered categorical items.
• Wire (Editorial Black & White + Fluorescent Orange): Keeps a black, white, and gray base across the entire graphic, using a single strike of bright orange to spotlight the most critical focal data point.

At the technical foundation, charts rendered in pure SVG (most Lupi and Basics types) fully support standalone, offline execution without network access. In contrast, charts powered by Chart.js, ECharts, or web fonts require an internet connection to load dependencies unless their assets have been inlined.

The Complete Catalog of 61 Charts: Data Shapes, Use Cases, and Boundaries

Lupi Series · 19 Charts (Hairline Strokes · Record-by-Record Depiction · Deep Reading > 30s)

The Lupi series maps a dot, line, or margin note to an actual data unit whenever possible, rather than rushing to compress raw observations into an immediate aggregate conclusion. Using hairlines, dot matrices, ledger-style guidelines, deliberate whitespace, and marginal annotations, it allows readers to inspect structure, distribution, and outliers. It is ideally suited for academic papers, long-form essays, annual reports, and data stories meant to be read slowly.

L1 Launch Fan

• Data shape: Multiple business entities, each with a launch timestamp and current scale magnitude.
• Best used for: Showcasing product evolution history or major feature rollout timelines, condensing time and volume onto a single folding fan.
• How to use: Each spoke represents a feature; smaller dots along the spoke mark each week elapsed since rollout; larger dots mark the launch week, with dot size representing current scale.
• When not to use: More than 15 entities, or general category comparisons lacking an explicit temporal dimension.

L2 Dot Cascade

• Data shape: Categorical summary data with a distinct ordinal ranking and discrete countable units.
• Best used for: Replacing coarse ranked bar charts. Each dot represents a single concrete occurrence (such as 1 incident or 1 customer), giving the rank disparities a palpable, tactile weight.
• How to use: Sort categories along a diagonal first, building upward in vertical dot strings for each category, with large dots and exact numeric totals placed at the top. Category labels are angled and best suited for short text; replace with F5, L5, or L12 for longer labels.
• When not to use: Aggregate macroeconomic comparisons where items count into the thousands or millions and cannot be broken down into individual micro-dots.

L3 Barcode Lollipop

• Data shape: A continuous time series of daily high-frequency readings spanning roughly 90 days.
• Best used for: Quarterly operational reviews, daily active user fluctuations, or serialized project logs, often used as full-width banner illustrations paired with text sidebars.
• How to use: Laid out horizontally by day, with ultra-thin hairline vertical stems rising from the base to terminate in tiny round dots at the top, undulating like a rhythmic barcode.
• When not to use: Overly extended time spans (such as multiple years) or extremely sparse data points (such as one value per month).

L4 Arc Matrix

• Data shape: An intersection matrix of Category Dimension A × Category Dimension B, with fewer than 100 total cells.
• Best used for: Lightweight matrix cross-tabulations, such as tracking the rollout density of 8 products across 12 core cities.
• How to use: Arrange two categorical dimensions along the horizontal and vertical axes. Instead of inserting rigid numeric digits at intersections, draw delicate arcs or concentric rings whose curvature maps to intensity.
• When not to use: Data grids exceeding 100 cells, or financial accounting tables requiring precise decimal comparison.

L5 Radial Convergence

• Data shape: Many-to-one subordinate or clustering relationships, with total records capped within 60 items.
• Best used for: Demonstrating how dozens of granular user feedback items or feature requests ultimately converge under 4–5 core strategic themes.
• How to use: Arrange the detailed list of specific issues along the outer perimeter, drawing fine lines that bundle inward toward the center to merge into core thematic nodes.
• When not to use: Tangled many-to-many network topologies, or discrete items lacking any hierarchical aggregation.

L6 Cluster Field

• Data shape: A relationship network composed of core and satellite nodes, emphasizing overall array contour rather than exact values.
• Best used for: Annual report covers or brand visual posters, illustrating the vitality of a contributor ecosystem or partner alliance.
• How to use: Position the core system in the center, radiating hundreds of hairline leader lines to connect external nodes and form a galaxy-like visual field.
• When not to use: Business contexts requiring precise lookup of quantitative link weights between specific nodes, or small display dimensions where details become illegible.

L7 Brand Spectrum

• Data shape: Bipolar semantic scales (where both ends of the axis represent legitimate positioning choices, such as "Geek vs. Mainstream") combined with multiple competitive benchmarks.
• Best used for: Brand positioning research reports, product tone perception maps, and corporate strategic posture evaluations.
• How to use: Draw a horizontal spectrum line with opposing attributes labeled at both ends, anchoring each evaluated brand at specific positions along the line like micro-notches on piano keys.
• When not to use: Unidirectional numeric performance scores (such as "satisfaction from 0 to 100") where the two ends do not represent balanced design philosophies.

L8 Dotty Matrix

• Data shape: Multiple groups × discrete grid cells × frequency values, emphasizing the visual cadence of equidistant arrays.
• Best used for: Magazine spreads and promotional brochures to illustrate resource allocation or capability distribution across multiple agile squads.
• How to use: Lay out a uniform grid coordinate system, stacking micro-dot arrays systematically within each cell to communicate volume through density.
• When not to use: Daily operational reporting scenarios where stakeholders need to extract key metrics at a glance.

L9 Bubble Almanac

• Data shape: Multi-year horizons (e.g., 5–10 years) × categorical tracks × scale magnitude × final status.
• Best used for: Product milestone chronicles and long-cycle strategic incubation journeys, exceptionally well-suited for rich text margin notes and historical milestones.
• How to use: Extend horizontally from left to right along a timeline, dividing business tracks vertically, with hand-drawn textured bubble clusters at intersections accompanied by detailed annotation callouts.
• When not to use: Short-term temporary campaign recaps spanning only a few weeks or months.

L10 Radial Patchwork

• Data shape: 24-hour circular cycles × event magnitudes, overlaying recurring records across multiple days or months.
• Best used for: Engineering team quarterly release cadence reviews, customer support incoming call peak distributions, or server incident cycle retrospectives.
• How to use: Map the 24 hours of a day across a 360-degree circle, with distance from the center representing event scale. Semi-transparent dots overlay one another; denser, darker areas reveal operational peak hours.
• When not to use: Linear, non-repeating time series lacking 24-hour cyclical attributes.

L11 Trend Lineage

• Data shape: Full lifecycle event sequences across multiple features (including ideation, rewrite, dormancy, active use, and deprecation).
• Best used for: Reviewing the evolutionary pedigree of an entire product suite over past years, documenting the birth and retirement of individual features.
• How to use: Use vertical years as the primary timeline, with each product or feature assigned a vertical track. Solid dots, hollow dots, dashed lines, and continuous lines track launch, redesign, dormancy, and ongoing activity.
• When not to use: Products that share no evolutionary relationship and only require a one-off comparison of isolated sales numbers.

L12 Type Colonnade

• Data shape: Many-to-one ownership relationships accompanied by an itemized directory listing, with total entries kept under 50.
• Best used for: Organizational governance audits, or mapping open-source repository responsibilities across designated teams.
• How to use: Preserve granular list items on the left, routing each entry via hairline curves to parent nodes on the right, labeled with aggregate totals. This retains individual records while presenting high-level division of labor.
• When not to use: Complex organizational tree structures exceeding three hierarchical tiers.

L13 Hourglass Stream

• Data shape: Process conversion counts or funnel ratios undergoing strict stage-by-stage attrition.
• Best used for: Briefing non-technical executives or investors on core funnel retention bottlenecks, replacing rigid geometric funnels with an organic fluid form.
• How to use: Flow vertically from top to bottom through a slender hourglass contour that constricts before gently flaring out, filled with delicate stream textures annotating drop-off at each conversion tier.
• When not to use: Flat, peer-level data arrangements lacking sequential causal conversion relationships between stages.

L14 Hundred Field

• Data shape: Percentage composition data summing to exactly 100%, with no more than 6 categories.
• Best used for: Structural analysis of small data samples. Replaces ubiquitous donut charts by reifying each share as individuals within a 100-member formation.
• How to use: Render a strict 10×10 micro-array where each dot represents exactly 1% or 1 individual, with counting units explicitly stated in the subtitle.
• When not to use: Continuous time series data, or compositions with too many categories (exceeding 6), which degrades legibility.

L15 Ballot Tally

• Data shape: Multi-select survey percentages where each option is independent (each value ranging between 0 and 100), with 6 or fewer options.
• Best used for: User persona preference polls, core pain point discovery surveys, and other multi-select questionnaire results.
• How to use: Lay out questions row by row, spreading 100 micro-ticks or dots across each row and illuminating lengths corresponding to vote percentages, accompanied by statistical annotations.
• When not to use: Mutually exclusive single-choice questions summing to 100%, or multi-choice polls with over 10 options that overcrowd the layout.

L16 Matrix Heat

• Data shape: Cross-tabulated metric values between two discrete dimensions, with fewer than 100 total cells.
• Best used for: Product portfolio synergy analysis (e.g., "which features are frequently used together") and in-depth channel conversion audits.
• How to use: Serves as a Lupi fallback. Retains restrained background shades with distinct hairline borders in a grid, spotlighting key cells with callouts and exact readings.
• When not to use: Monitoring dashboards or quick weekly reports where readers must absorb takeaways in under 3 seconds (use G20 instead).

L17 Calendar Heat

• Data shape: A full-year calendar sequence of 52 weeks × 7 days, paired with non-negative daily event frequencies.
• Best used for: Engineering team annual commit frequency retrospectives, annual user habit tracking, or daily system anomaly inspections.
• How to use: Directly selected when no primary library alternative exists. Arrange 52 weeks horizontally and Monday through Sunday vertically, using monochromatic grayscale or celadon steps to represent daily volume.
• When not to use: Short durations spanning only a few days or weeks, or data captured at hourly granularity.

L19 Ridgeline

• Data shape: Continuous probability density profiles across 3–8 groups, with clear temporal or categorical contrasts between groups.
• Best used for: Comparing ticket resolution time distributions across business lines, or analyzing the long-tail shapes of code merge cycles across teams.
• How to use: Serves as a fallback chart. Multiple undulating ridge curves cascade vertically with gentle overlap, each tier illustrating the distribution shape of one dataset.
• When not to use: Only 1–2 discrete categories, or groups represented by a single mean value without underlying sample distributions.

L20 Parallel Coordinates

• Data shape: The same cohort of entities evaluated across 3–6 continuous assessment dimensions, with one polyline tracing each entity.
• Best used for: High-dimensional multi-metric product benchmarking (e.g., comparing 10 competitors across performance, pricing, usability, battery life, etc.).
• How to use: Directly selected when no primary library alternative exists. Stand up 3–6 vertical axes in parallel; each polyline represents one product, traversing across axes from left to right.
• When not to use: Simple datasets with only 1–2 dimensions, or sample cohorts numbering in the thousands where lines collapse into an illegible tangle.

Basics Group · 17 Charts (F1–F17 · Hairline Craft × Classic Silhouettes · Preferred for Sparse Small Data)

Many authors face an awkward dilemma: their data is straightforward (such as four quarters of profit or sales across three flagship products), and forcing it into a complex network diagram imposes unnecessary cognitive load; yet generating a standard Excel bar chart feels cheap and uninspired.

The F1–F17 Basics group was created specifically to solve this. From afar, they preserve the most intuitive, easily recognizable silhouettes in human cognition—bar charts, line graphs, donut charts. Up close, however, every bar and arc is constructed from micro-ticks and countable hairline strokes. When your data is relatively sparse, this group should be your first choice.

F1 Rung Bars

• Data shape: Comparisons across a small number of categories (8 or fewer), where values represent physical, countable units.
• Best used for: Revenue comparisons across subscription tiers, or key enterprise customer signings per quarter.
• How to use: Maintains the vertical structure of a bar chart, but replaces solid blocks of heavy color with horizontal hairline rungs spaced like steps on a bamboo ladder.
• When not to use: More than 10 categories causing horizontal axis labels to overlap, or pure percentage composition distributions.

F2 Hairline Line

• Data shape: Continuous daily time series within 30 days, requiring precise inspection of daily fluctuations.
• Best used for: Daily new sign-up trends over the first four weeks post-launch, or daily revenue during major promotional campaigns.
• How to use: An ultra-delicate 1-pixel polyline glides across the canvas, with inflection points accented by micro-circles and local peaks and valleys annotated directly, avoiding heavy fills.
• When not to use: Multi-year time spans that compress line segments into a dense block, or trends devoid of cyclical patterns.

F3 Hairline Area

• Data shape: Continuous 30–60 day time series focused on perceiving macro trajectories, bounds, and overall profile.
• Best used for: Concurrent active user trends over two months, or server storage capacity expansion curves.
• How to use: Bound at the top by a hairline stroke, with the lower area shaded by dense, equidistant vertical hatching lines, conveying volume while preserving airy transparency.
• When not to use: Multiple intersecting time series, as layered hairline hatching causes severe visual interference.

F4 Tick Donut

• Data shape: Proportional segmentation summing to 100%, with 6 or fewer categories.
• Best used for: Overall website traffic acquisition channel shares, or departmental budget allocations across core initiatives.
• How to use: Replaces solid pie charts with an open ring whose perimeter is demarcated with precise tick marks, showcasing the primary category's value prominently in the open center.
• When not to use: More than 6 categories resulting in fragmented slivers, or values that do not form a mutually exclusive whole.

F5 Tick Rows

• Data shape: Ranked horizontal categorical comparisons with long text labels, with 8 or fewer rows.
• Best used for: Release counts across engineering teams, or lead conversion rankings across marketing campaigns.
• How to use: Category labels sit comfortably on the left, extending rightward into horizontal raster bars composed of micro-vertical tick marks aligned to a baseline scale.
• When not to use: Extremely high category counts (over 15) that elongate the layout excessively.

F6 Paired Rungs

• Data shape: Grouped comparisons where each category contains exactly 2 paired series (e.g., this year vs. last year, target vs. achieved).
• Best used for: Annual performance reconciliations against prior-year baselines, or actual vs. projected gross margins across product lines.
• How to use: Stand up two parallel micro-rung bars per category, using light gray solid strokes on the left and accent colors or varied hatching densities on the right.
• When not to use: More than 3 comparison series, which overcrowds the interior of each category cluster.

F7 Stacked Rungs

• Data shape: Categorical stacked compositions with 4 or fewer categories, each containing 3 or fewer stacked tiers.
• Best used for: Regional gross revenue breakdowns dissected by Basic, Pro, and Enterprise subscription tiers.
• How to use: Vertical bars are segmented into 2–3 tiers of micro-hatching textures, separated by subtle whitespace or dashed divider lines.
• When not to use: Deep stacking hierarchies (over 4 layers) where baseline shifts distort the perceived trends of middle segments.

F8 Plumb Scatter

• Data shape: Two-dimensional continuous metrics cross-tabulated (X metric vs. Y metric), with 20 or fewer sample entities.
• Best used for: Investigating product average order value vs. Net Promoter Score (NPS), or feature usage frequency vs. maintenance overhead.
• How to use: Data points float in a 2D Cartesian plane, each dropping a straight, weightless hairline plumb line to the X-axis to help readers read baseline projections instantly.
• When not to use: Hundreds or thousands of sample points (where plumb lines would blanket the canvas; use G15 instead).

F9 Rung Waterfall

• Data shape: Stepwise additions and subtractions transforming an initial total into a net balance, with 6 or fewer stages.
• Best used for: Gross revenue to net profit cost reconciliations, or user drop-off audits from initial visit to checkout completion.
• How to use: Floating bar blocks step across from left to right, using distinct hatching patterns for additions and subtractions, connected by light horizontal dashed guidelines.
• When not to use: Standard discrete categories lacking progressive cumulative derivation.

F10 Dot Heat

• Data shape: Cyclical dual-time dimensions of Day of Week × Hour, accompanied by frequency values for each intersection.
• Best used for: Weekly technical support reports showing ticket arrival patterns, or community managers identifying peak engagement hours.
• How to use: Laid out horizontally across hourly bins and vertically from Monday through Sunday, mapping volume to circle size or tonal depth at each intersection.
• When not to use: Multi-year macroeconomic trend reviews (use L17 for long horizons).

F11 Tick Gauge

• Data shape: Percentage progress (0%–100%) toward a single core Key Performance Indicator (KPI).
• Best used for: Quarterly sales quota attainment, major version milestone countdowns, or system capacity threshold monitoring.
• How to use: A semicircular or horseshoe hairline tick track, with a pointer or highlighted tick anchored at the current percentage mark, accompanied by an emphatic numeric display in the center.
• When not to use: Datasets containing multiple categories or time series trends.

F12 Dumbbell Queue

• Data shape: A small set of categories (6 or fewer) evaluated across two specific milestones (typically before vs. after, or pre- vs. post-redesign).
• Best used for: Average onboarding duration reduction following a product revamp, or channel conversion rate lifts before and after strategic adjustments.
• How to use: Each row features a baseline track anchored by solid micro-beads at either end, connected by a line segment forming a dumbbell that emphasizes the distance traversed.
• When not to use: Extended evolutionary timelines involving more than two temporal milestones.

F13 Nested Treemap

• Data shape: Two-level hierarchy paired with explicit positive numeric weights, where rectangle area is strictly proportional to value.
• Best used for: Quarterly engineering hour allocation across technical modules, or annual corporate IT infrastructure spending distributions.
• How to use: Broad clusters partition the outer boundary, subdivided internally into child modules, with hairline framing filling the page grid efficiently.
• When not to use: Datasets with zero or negative values, or hierarchies deeper than four tiers where leaf nodes become illegible.

F14 Rung Histogram

• Data shape: Binned frequency distributions of a single continuous variable, where intervals carry clear domain significance.
• Best used for: Assessing how many hours customer support tickets take to resolve (e.g., partitioned into 0–2h, 2–4h, 4–8h, 8h+).
• How to use: Serves as a fallback chart. Adjacent bars touch without gaps, filled with equidistant tick steps that convey sample clustering directly.
• When not to use: Nominal categories lacking natural ordering (which call for bar charts rather than histograms).

F15 Tick Box

• Data shape: Continuous distributions across multiple groups expressed via five-number summaries (min, Q1, median, Q3, max) alongside outliers.
• Best used for: Scientific benchmark comparisons, server cluster API latency profiling, or compensation tier distributions.
• How to use: Directly selected when no primary library alternative exists. Outlines boxes, median bars, and whisker bounds with restrained hairlines, letting outliers float as hollow circular points.
• When not to use: Datasets providing only aggregate single averages without underlying quartiles or outlier records.

F16 Stream Ribbon

• Data shape: Volume evolution of 2–5 categorical streams across continuous time, tracking both aggregate volume shifts and individual share dynamics.
• Best used for: Revenue contribution shifts across a company's three flagship products over the course of a year.
• How to use: Directly selected when no primary library alternative exists. Wavy ribbons meander along the timeline like river currents, each tributary distinguished by varied hatching line densities.
• When not to use: More than 6 categories causing streams to intertwine confusingly, or discontinuous data with sporadic time gaps.

F17 Candlestick

• Data shape: Financial time series with four core values: Open, High, Low, and Close.
• Best used for: Digital asset market price tracking, commodity weekly price fluctuation monitoring, and trading session reviews.
• How to use: Directly selected when no primary library alternative exists. Hollow boxes denote upward gains, solid boxes denote declines, with hairline wicks extending above and below.
• When not to use: Standard time series with single daily readings (a standard line chart suffices; never force candlestick styling).

Glance Series · 20 Charts (Heavy Strokes · High Aggregation · Rapid Scanning)

In stark contrast to the hairline, handcrafted aesthetic of the Lupi collection, the Glance series is engineered specifically for high-efficiency, rapid-cadence reading. Its heavier stroke weights pre-aggregate and distill complex data in the background, allowing busy executives or mobile readers to grasp core takeaways within 3 to 10 seconds. It is exceptionally well-suited for executive weekly reports, operational dashboards, slide presentations, or short-form video assets.

Among them, G9, G12, G16, G17, and G18 leverage motion directly to convey view morphing, staggered reveals, ranking transitions, real-time streaming, and cumulative milestones. You can preview the original animations recorded from the repository templates below before reviewing the static catalog descriptions.

G3 Chunky Bars

• Data shape: Ranked horizontal or vertical comparisons across a small category set (6 or fewer).
• Best used for: Weekly executive summaries comparing product tier revenues, or top 5 acquisition channel races.
• How to use: Uses broad, highly legible thick bars with subtle rounded corners, printing bold values directly above the bar endpoints.
• When not to use: More than 8 categories, or granular research where readers must inspect underlying record breakdowns.

G4 Dot Waffle

• Data shape: Proportional composition summing to 100%, with category counts kept low enough for instant differentiation.
• Best used for: Replacing standard pie charts on mobile screens or weekly dashboards to illustrate sign-up acquisition channels.
• How to use: A square grid of 100 solid circular dots illuminated in contrasting color blocks for each category, projecting a modern graphic design aesthetic.
• When not to use: More than 5 categories that introduce high color-lookup friction, or longitudinal trend presentations.

G5 Pictorial Bar

• Data shape: Simple count metrics across years or categories, where an icon glyph represents a fixed physical quantity.
• Best used for: Brand communications and CSR initiative reporting (e.g., "one tree icon per 1,000 saplings planted").
• How to use: Replaces abstract geometric bars with repeated pictorial vector icons; readers can gauge totals by counting icons.
• When not to use: Formal financial reporting with fractional precision, or technical academic papers.

G6 Circular Graph

• Data shape: Lightweight relationship networks with 12 or fewer nodes.
• Best used for: Illustrating cross-departmental collaboration hubs or core microservice invocation dependencies within executive summaries.
• How to use: Nodes form a small ring with smooth interior connecting arcs, revealing the central junction within 3 seconds.
• When not to use: Dense network topologies (for networks over 15 nodes, switch to standalone graphic B1).

G7 Tree LR

• Data shape: Clear hierarchical taxonomies spanning 2–3 levels, without requiring proportional weight visualization.
• Best used for: Product release functional architectures, or corporate department functional overviews.
• How to use: Branches unfold cleanly from left to right, terminating in discrete feature card tags.
• When not to use: Contexts requiring precise comparison of capital allocation or code footprint shares (use F13 Treemap instead).

G8 Rainfall Dual Area

• Data shape: Dual synchronized time series exhibiting strong causal or comparative relationships (such as ad spend vs. revenue return).
• Best used for: Growth teams reviewing marketing ad spend against generated revenue to pinpoint margins and scissor gaps.
• How to use: The upper series projects downward like falling rain while the lower series ascends from the baseline, meeting in the middle to form a visual spread band.
• When not to use: Arbitrarily pairing two unrelated metrics that lack clear business logic linkages.

G9 Scatter Morph

• Data shape: The same entity cohort evaluated across 3 or more independent analytical projections.
• Best used for: Live product keynotes, executive slide decks, and animated data storytelling.
• How to use: Morphs smoothly between three coordinate projections via animation, showing how customer cohorts cluster across different dimensions.
• When not to use: Print reports or static PDF exports where motion cannot be experienced.

G10 Diverging Bar

• Data shape: Polarized positive and negative growth data centered on a zero baseline.
• Best used for: Year-over-year regional growth comparisons (e.g., +40% in one territory, -15% in another), or customer satisfaction net balance scores.
• How to use: A vertical axis sits centered, with positive bars extending rightward and negative bars extending leftward in contrasting colors.
• When not to use: Datasets where all values are strictly positive or strictly negative (standard bar charts suffice).

G11 Force Graph

• Data shape: A network consisting of a central hub and surrounding satellite nodes, with fewer than 15 total nodes.
• Best used for: Product integration ecosystems (such as visualizing a platform connected to a dozen external APIs).
• How to use: Supports mouse dragging, with physics forces pulling satellite spheres into an elastic bounce around the hub.
• When not to use: More than 20 nodes causing spheres to overlap and collide excessively (see B2 for large networks).

G12 Stagger Wave

• Data shape: Macroscopic distributions spanning 30–60 dense categorical bars.
• Best used for: Short-video intros or conference keynote screen openers displaying tier rankings across global markets.
• How to use: Dozens of slender columns rise sequentially from left to right with slight time offsets, producing an undulating visual soundwave.
• When not to use: Analytical retrospectives where readers need to measure exact numeric values for individual bars.

G13 Big Slice / Custom Pie

• Data shape: Multidimensional dual encoding (polar sector angle encodes count share, while radial length encodes usage intensity).
• Best used for: Deep product analytics (revealing not only which feature has the most users, but also which features see intense, heavy usage despite lower user counts).
• How to use: The circle is carved into stepped, variable-radius slices, delivering two layers of metric insight in a single viewport.
• When not to use: General audiences unfamiliar with advanced visualization idioms, where misinterpretation risk is high.

G14 Single Axis

• Data shape: Punctual 2D time data structured as Day of Week × Hour, paired with numeric magnitudes.
• Best used for: Infrastructure operations teams diagnosing which hours on which days produce service alert spikes.
• How to use: Monday through Sunday each occupy an individual horizontal single axis, with points plotted across hours 0–23 sized by frequency. This preserves daily rhythm without taking up excessive grid space.
• When not to use: Administrative reporting requiring a standard calendar grid for shift scheduling.

G15 Jitter Strip

• Data shape: Multi-group continuous distributions underpinned by hundreds of raw transaction records.
• Best used for: Support ticket resolution time audits, exposing outlier cases with severe delays.
• How to use: The horizontal axis represents continuous values (e.g., resolution hours), while the vertical axis designates categorical tracks. Points jitter slightly along the vertical track to prevent occlusion while preserving every raw record.
• When not to use: Datasets reduced to isolated averages without underlying record samples.

G16 Bar Race

• Data shape: Rank fluctuations across multiple entities spanning discrete time intervals (e.g., 12 months, 5 quarters).
• Best used for: Viral social video explainers, or annual company all-hands meetings showcasing shifting regional sales leaderboards.
• How to use: Bars slide and re-order smoothly as time advances, animating the battle for the top spot.
• When not to use: Static print layouts or editorial article illustrations (where animation cannot play).

G17 Dynamic Stream

• Data shape: High-frequency real-time rolling streams updating by the second or minute.
• Best used for: Network operations command centers, or live broadcast traffic monitoring during major sales events.
• How to use: A wavy surface shifts continuously from right to left, with incoming data generating immediate waves along the right boundary.
• When not to use: Historical post-mortem reports based on static, archived figures.

G18 Draw-in + Counter

• Data shape: Historical progression of a single cumulative metric, anchored by an ultimate milestone figure.
• Best used for: Annual recaps or keynote presentations highlighting milestone achievements like "H1 total revenue crosses $1B."
• How to use: A big-number counter counts up to its final value while the cumulative trend line draws in from left to right; both share the same progress pacing to ensure synchrony.
• When not to use: Technical working sessions requiring rigorous breakdown of multiple contributing factors.

G19 Violin

• Data shape: Full probability density profiles for grouped continuous variables, paired with median markers.
• Best used for: Serves as a fallback chart. Compares ticket response duration distribution profiles across pricing tiers within dashboards.
• How to use: Shaped like a violin silhouette, with bulging widths marking peak data concentration and a solid white center dot marking the median.
• When not to use: Small sample sizes where density estimation is unstable, or when stakeholders require five-number summaries and explicit outliers; use F15 for the latter.

G20 Matrix Heat / Glance

• Data shape: Intersecting discrete dimensions × metric values, with fewer than 60 total cells.
• Best used for: Serves as a fallback chart. High-level weekly operational audits of compatibility bug rates across software versions and OS platforms.
• How to use: Features large cell blocks and strong color contrast, printing values centered directly inside cells for 3-second scanning without requiring hovers.
• When not to use: Scientific research cross-tabulations with hundreds of cells (use the hairline L16 instead).

G21 Rank Strip

• Data shape: Rank shifts across business entities evaluated at discrete intervals (e.g., Q1 through Q4).
• Best used for: Serves as a fallback chart. Static print layouts reviewing product tier position shifts; the best static equivalent to the dynamic Bar Race (G16).
• How to use: Evaluation periods line up on the left and right, with entity paths interweaving like ribbons to highlight overtakes.
• When not to use: Datasets with so many entities or time steps that crossing paths become untraceable; filter key entities, break into small multiples, or switch to interactive G16.

G22 Aggregate Sankey

• Data shape: High-level volume flows from a small set of source nodes on the left to a small set of terminal nodes on the right, without individual thread tracing.
• Best used for: Serves as a fallback chart. High-level marketing summaries tracing how budget allocations flow into top-level conversion funnel stages.
• How to use: Ribbon widths scale proportionally to flow volume with smooth transitions, highlighting coarse split distributions.
• When not to use: Detailed audits where readers must trace more than 100 granular operational paths (use large graphic B3 for end-to-end tracing).

Maps · 2 Charts (Requires Online GeoJSON · Explicit Requests Only)

The presence of geographic names like "Beijing," "California," or "Germany" in a dataset does not mandate drawing a map. In most cases, comparing regional figures using bar or column charts is far more effective, as geographic land area can severely mislead visual perception (a massive geographic territory might account for negligible sales).

These two chart types are triggered only when you explicitly instruct the AI to "draw a geographic distribution map." Map charts are powered by ECharts and depend on online GeoJSON boundary data, requiring an active internet connection.

M1 US Choropleth

• Data shape: Two-letter codes or full names for the 50 US states, mapped to non-negative metrics or rates.
• Best used for: Domestic US e-commerce state sales reviews, or North American market state penetration summaries.
• How to use: Partitions the US landmass by state boundaries, mapping color intensity directly to metric values, accompanied by a legend.
• When not to use: Simple top-5 state comparisons (a bar chart is far more effective), or scenarios requiring exact coordinate pinpoint delivery routing.

M2 World Choropleth

• Data shape: Global ISO country codes mapped to non-negative metric values.
• Best used for: Global enterprise expansion overviews, or international registered user continent distributions.
• How to use: Renders the world map boundary, automatically applying color fills based on country metrics, with hover tooltips revealing exact values.
• When not to use: Hyper-local domestic municipal research, or flight route tracking across international logistics hubs.

Standalone Interactive Graphics · 3 Charts (Full-Page Viewports · High-Density Relational Data)

When your relationship data is exceptionally complex (such as dozens of partner nodes or hundreds of crisscrossing flows) and cannot fit within standard cards or article paragraphs, Lieflat Charts offers 3 standalone full-page interactive components. Each occupies an independent HTML file and provides nuanced interaction feedback.

B1 uses hover to isolate node relationships, B2 supports dragging nodes to observe force-directed network settling, and B3 tracks data flows along individual or bundled paths. Preview the three interaction states below before reviewing their data fits.

B1 Big Circular (templates/big-circular.html)

• Data shape: Dense relationship networks with more than 15 nodes; the reference template uses 60 nodes.
• Best used for: Academic paper citation networks, or mapping architectural dependencies across hundreds of corporate microservices.
• How to use: Nodes sit equidistantly along a large perimeter ring, with the interior filled with hairline semi-transparent chords. Hovering over any node dims unrelated connections to highlight its immediate neighbors; clicking replays the inward gather animation.
• When not to use: Lightweight relationship maps with fewer than 15 nodes (use G6 for lightweight needs).

B2 Big Force (templates/big-force.html)

• Data shape: Large topological networks requiring node-by-node exploration; the reference template uses 180 nodes.
• Best used for: Galaxy maps of contributors across massive open-source communities, or anti-money laundering transaction tracing dashboards.
• How to use: A physics engine calculates attraction and repulsion, with hundreds of spheres revolving gently like stars. Readers can drag any core sphere to see the network bounce and stretch, or hover to isolate sub-clusters.
• When not to use: Formal board meetings requiring precise tabular figures, or static screenshot captures for social media.

B3 Big Threads (templates/big-threads.html)

• Data shape: Multi-stage paths containing over 100 individual flow paths requiring granular path tracing.
• Best used for: Tracing micro-behavioral user journeys across multi-step flows, or end-to-end operational funnel drop-off attribution.
• How to use: Hundreds of hairline threads weave from left to right across stages. Readers can hover over a single thread or bundle to lock and inspect its exact throughput metrics in the bottom status bar, clicking to pin the view.
• When not to use: Presenting coarse executive summaries like "total visitors vs. final converters" (use L13 or G22 instead).

Report Templates Quick Reference (R01–R12 · Full-Page Layout Skeletons)

When your goal extends beyond generating an individual chart to producing an entire publication-ready research report, long-form infographic, or dashboard, use these 12 templates. They serve as pre-designed layout containers with pre-tuned chart ratios, grid structures, and color guidelines, and should not be counted toward the individual chart library total.

Direct visual previews of 12 full-page report skeletons. Review the information density and layout first, then refer to the table below to compare use cases and dependencies.

In practice, evaluate at least 3 candidate templates against your audience and scenario. Once you lock in a template, maintain its complete layout skeleton rather than splicing pieces from multiple templates together.

Handing Data to Your Agent: Three Ready-to-Use Prompts

As a writer, marketer, or product manager, you do not need to inspect underlying code. Simply copy the prompts below into an AI equipped with the Lieflat Charts skill, replacing bracketed content with your actual data.

In-Depth Article Illustrations

"I am writing an in-depth industry analysis on [shifts in consumer subscription habits]. Here is my research data: [Paste your data, such as renewal rates across tiers, primary user complaint breakdowns]. Please generate 3 data charts suitable for embedding in the article. Strictly adhere to selection rules: Prioritize candidate chart types within the Lupi Editorial and Lupi Basics groups; only consider falling back to Glance if neither group fits the data structure. Lock all charts uniformly to the Porcelain (Celadon Blue) color palette. Output standalone HTML files that can be previewed directly with a double-click."

Executive Weekly Briefing and Monitoring Dashboard

"Here is our team's core operational data for this week: [Paste data, such as daily active user DoD changes across 5 features, customer acquisition costs across 4 channels]. Leadership needs to understand the changes within 10 seconds. Generate charts following the Glance specification, featuring bold, high-contrast strokes, prominent highlights, and big-number key takeaways. Use the Wire palette (editorial black and gray base + fluorescent orange accent), applying orange only to the most critical outlier or breakthrough metric while keeping remaining data in muted grayscale."

Annual Review and Survey One-Pager

"We need to deliver an annual service review report for our client. Here is our full-year data breakdown: [Paste full dataset]. Please activate Report Mode, evaluate the 3 best-fitting templates from R01–R12, and explain your recommendations. Once confirmed, strictly apply the selected report skeleton to generate a complete single-page HTML file. Keep the canvas width standard, ensuring generous layout breathing room between modules and elegant, readable typography."

Get Lieflat Charts on GitHub

To let AI generate these HTML charts or full-page reports directly, visit the Lieflat Charts GitHub repository to explore the complete templates, installation instructions, and latest code. Once installed, pass your data, target scenario, and intended reading pace to your Agent, and let it select and build charts based on the catalog IDs introduced in this guide.