Which stack does the source use?

React. The direct option-based panel imports ECharts; the separate summary card uses Recharts and project chart/card/menu helpers. The workflow adapts the chosen implementation to your repository. Standalone HTML output can be built when requested.

Does it fetch sales from a service?

No. The package starts with local example arrays. Connect your actual reporting source separately and keep bundled libraries and assets local if the resulting page should avoid remote requests.

Can I use my own actual and target series?

Yes. Replace dates and values, then review units, legend names, filled-area meaning and comparison formulas. The ECharts option is set on initialization; automatically refreshing it from changed data requires additional integration.

Are the displayed percentages a verified target variance?

No. The alternate tooltip compares an entry with the first filtered payload entry, which can produce a self-comparison. Define and implement the intended actual-versus-target formula and check it independently before publishing the result.

Do the summary menu items work?

The included entries have labels and icons but no export, range, filter, reload or share handlers. Wire the desired actions or remove the entries rather than presenting them as available report tools.

Summary Line Chart

Previews from the publisher

Compare a reported result with its target across a short sequence of periods. Summary Line Chart provides an editable ECharts multi-line panel and a separate sales-summary card example. It is a source-level starting point for a report: you supply the actual results, targets, units and comparison logic rather than treating the sample figures as verified performance.

What you get

A React/ECharts panel with six labeled months and three smooth sample lines named goals, sales and salesArea, with a bottom legend, dotted grid and axis-hover tooltip. All three are independent arrays in the supplied option.
A plain chart definition containing category labels, series values, palette, typography and animation. It renders on canvas, resizes with its container and disposes the instance on cleanup without a separate WebGL engine.
A separate Recharts summary card using a solid sales line, dashed target line, reference-date marker and a gradient-filled salesArea series. It includes dollar formatting and a menu whose export, period, filter, reload and share entries have no action handlers.
Editable component and example files plus the shared visual contract for colors, type scale, radius, icon strokes and motion, with project-adaptation and local-asset guidance.

Before you choose

Choose this when the reader’s main question is whether actual results met a stated target. Use one known period to validate the comparison and make the target definition explicit. Decorative shading, a third series and a percentage badge should each explain a real quantity; remove them when they do not.

Good fit

A compact performance report where actual and target values share a unit and reporting period.
A developer who wants a chart configuration to adapt directly and can define the comparison rather than build it from the sample’s labels.
A project prepared to align palette and spacing with nearby content and maintain the chosen library and copied source.

Not for

A dependency-free maintained npm widget. ECharts powers the panel; the alternate card requires Recharts and additional UI helpers.
Automatic adoption of a mature design system or a verified sales/variance calculation ready to publish unchanged.
Live streaming, virtualized huge datasets or already operational export, filtering and sharing tools.

How to use

You say

/data-visualization-summary-lines Add the Summary Line Chart component to my dashboard using the data I provide. Inspect the existing page and framework before integrating it; ask for missing data rather than inventing values.

Inspect the target project and choose the plain ECharts panel or the separate Recharts summary card. Resolve the selected path’s component imports and dependencies, adapting to the project’s existing structure.
Prepare ordered periods, actual values and matching targets in one unit. Decide whether a filled area repeats the actual series or represents a distinct measure; the package’s salesArea values differ from sales and should not silently stand in for them.
Replace sample arrays, period labels and financial formatting together. Set a precise variance formula, its denominator and the meaning of a favorable change, including what happens when a target is zero.
Apply the visual contract across colors, type, radius and motion. In the Recharts alternative, connect menu actions only if they will actually export, change the period, filter, reload or share; otherwise remove the unused entries.
Compare several points and target gaps with an independent calculation, then inspect tooltip units, reference marker and legend names. Review phone-width readability, resize behavior and project type/build checks, keeping assets local. Real data loading and reactive ECharts updates need additional wiring beyond the supplied initial option.

Requirements and costs

You bring: Not collected yet
Dependencies: ECharts — required
Outside costs: Not collected yet
Publisher testing: v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT