LineChart

Examples #

'use client';

import { LineChart } from '@coreux/ui';

export default function Default() {
  return (
    <div role="group" aria-label="Illustrative monthly adoption indices, January through July. Pilot: 10, 22, 28, 40, 55, 68, 80. Baseline: 8, 12, 15, 20, 26, 30, 35. These are fictional comparison series, not measured CoreUX results." style={{ width: 340, background: '#F4F1E9' }}>
      <LineChart
        width={340}
        height={220}
        series={[
          { id: 'with', label: 'Pilot', values: [10, 22, 28, 40, 55, 68, 80] },
          { id: 'without', label: 'Baseline', values: [8, 12, 15, 20, 26, 30, 35] },
        ]}
        xLabels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']}
      />
    </div>
  );
}

Choosing a presentation #

Use a line for one or two comparable measures in a meaningful order, such as consecutive months. Points are equally spaced by array index: labels like dates do not create a time scale or account for missing intervals. For unrelated categories, use BarChart; for parts of a whole, use DonutChart.

• Default · two series retains the seed’s two seven-point datasets, January–July labels and 340 × 220 px geometry. Its labels change from “With CoreUX” / “Without” to “Pilot” / “Baseline” so fictional data do not imply measured CoreUX results.
• Compact retains the 160 × 80 px seed and seven-point trend. It needs an adjacent explanation because compact mode removes all axes, grid, labels and legend.
• Explicit domain · dark shows illustrative daily workload variance, including negative and zero values, in a shared −15 to 15 domain. The single named series omits the legend.
• Compact · dark repeats the compact dataset on navy with a 0–100 domain, making the domain choice visible in the curve’s vertical extent.

Both seeds retain their chart dimensions and data. Their outer 24 px padding and the compact seed’s spare wrapper width are omitted; the documentation canvas supplies space. Copied files include the surface and client directive. Their named groups include the complete illustrative values, units and order because the component’s image name identifies series only.

Data & validation #

Provide one or two series, each with 2–12 finite ordered values. All series must have the same point count. IDs must be unique non-empty strings and series labels one non-empty text line. Negative values and zero are supported; missing, infinite or NaN values are not. Invalid inputs throw when the component renders.

If supplied, xLabels must match the point count, with a non-empty single line for every point. In normal mode, showLabels=true requires xLabels and displays both x labels and y-axis numbers. Without xLabels, labels default off even though axes and grid default on. There is no independent y-label toggle or automatic date/value formatter; numbers round to at most three decimal places.

Choose a meaningful domain

An explicit domain needs finite min < max, must include every value, and must have a finite positive range. Unlike BarChart, it need not start at zero. With no domain, the component adds 10% of the data range above and below the minimum and maximum across both series. If every value is equal, it adds the larger of 10% of the absolute value and 1 on each side.

The two-series seed spans 8–80, so its automatic domain is 0.8–87.2. The compact seed spans 10–80 and defaults to 3–87. A domain of 0–100 gives those examples a consistent comparison scale. A constant zero series defaults to −1–1. The calculated bounds and range must remain finite; extreme finite inputs can still throw. Automatic padding does not guarantee a zero baseline, so explain the scale when changes might otherwise look exaggerated.

Normal and compact geometry

Normal mode requires at least 240 × 160 px; compact requires at least 96 × 56 px. Both dimensions must be finite. A normal-mode legend takes 48 px from the supplied height, even for one series. It does not add height outside the chart, and the 160 px validation floor remains the same. For the 340 × 220 px default, the SVG is 172 px tall; removing the legend returns the full 220 px to it.

Compact mode forces axes, grid, labels and legend off even if their props are true. It uses 6 px margins, thinner line strokes and smaller points; points remain on by default. This is an authored presentation, not a breakpoint activated by a narrow container. Two series are allowed without a legend, including in compact mode, so supply an unambiguous explanation or prefer one series.

In normal mode, labels reserve a 52 px left margin and 38 px bottom margin; there is no text wrapping or collision avoidance. The legend is a single clipped flex row. Two long capsule names can run out of room. These minimum dimensions are validation floors, not a guarantee of readable labels; shorten names or give the chart more room.

Appearance & motion #

fieldMode="light" uses navy/slate text and a cobalt first series. fieldMode="dark" uses ivory/pale-steel text and a cornflower first series; the second series stays coral in both modes. Axes, grid, point centers and capsule legend also follow field mode. The chart background is transparent, so use the matching outer surface shown in each copied example.

This video-derived component uses inline styles and SVG attributes. It exposes no tone, className, style, custom palette or arbitrary HTML-attribute passthrough. Wrapper utilities can arrange surrounding content; they do not override the internal plot geometry and typography through a supported component API.

Remotion is not required. All progress props default to 1 for a completed static chart, and there is no internal clock. Finite progress values clamp to 0–1; NaN and infinity throw. seriesProgress is a scalar or an array with exactly one value per series and controls line drawing. pointProgress controls point size and opacity separately, while labelProgress controls labels and legend. These channels do not change the data or domain. Respect reduced-motion preferences if you animate them yourself.

Props #

Types and required flags come from the installed public declarations. Defaults below are checked against LineChart itself, including its xLabels-dependent label default.

Accessibility & layout #

The component has an image role with a generated name listing series names. It does not announce point values, x labels, units, domain or a trend summary. The SVG is hidden from assistive technology and there is no linked data description. The examples’ surrounding named groups supply their complete illustrative values, units and order.

In a published composition, put a visible title, timeframe, units, source and short takeaway beside the chart, and offer a text table or download for exact lookup. Keep this explanation visible with a compact trend, since its axes and legend are deliberately absent. Two series share a solid-line style and need clear identification beyond color alone. The component provides no hover, selection or keyboard data controls.

Width and height are fixed CSS pixels; overflow is clipped and there are no responsive breakpoints. Fit to canvas scales the entire documentation preview, including text, without changing props or copied source. Actual size keeps the authored dimensions inside a focusable scrolling region. Choose an intentional compact example or supply a readable alternative for small screens rather than expecting the chart to reflow.

Consumer setup #

Browsing, previews, and copying are public. Installing the private @coreux/ui package requires repository read access and permission to use the bundled CoreUX brand fonts.

Follow the one-time installation guide for the pinned Git dependency, Tailwind v4 stylesheet setup, fonts, and troubleshooting. Keep the 'use client' directive in each example; no provider is required.

The quick start walks through a copied StatBlock in a minimal app.

Source & revision #

This reference targets @coreux/ui version 0.1.0 at 06f42fd. Types come from its installed declarations; explanations and defaults are checked against this implementation.

Revision and upgrade notes · Contribution and coverage guide