Line Charts

Line charts are the default choice when you need to show change over time, compare multiple series, and make trends readable without forcing the reader to do arithmetic in their head. RareCharts supports a set of practical defaults and configuration options that help keep line charts clear even when the data is messy, multi-series, or formatted for business reporting.

A common use case is performance comparison: multiple instruments, portfolios, products, or metrics plotted on the same time axis, where the story is not “what is the exact number”, but “who moved, when, and how strongly”.

Data can be passed either as a single series or as multiple named series.

Single series format

chart.setData([
    { date: '2026-01-01', value: 1.00 },
    { date: '2026-01-02', value: 2.5 },
    { date: '2026-01-03', value: -0.6 },
]);

When you pass data like this, the library will use options.seriesName (default: "Series") and options.lineColor (default: theme accent) to build the internal series object.

Multi-series format

chart.setData([
    {
        name: 'Portfolio A',
        color: '#00c97a',
        values: [
            { date: '2026-01-01', value: 0.00 },
            { date: '2026-01-02', value: 0.010 },
        ],
    },
    {
        name: 'Portfolio B',
        color: '#ff3b5c',
        values: [
            { date: '2026-01-01', value: 0.00 },
            { date: '2026-01-02', value: 0.006 },
        ],
    },
]);

Dates are parsed via parseDate (…), so strings, timestamps, and Date objects are accepted as long as they can be converted to a valid date.

Styling and Themes

Configuration

The Line chart exposes a set of options that focus on business readability: formatting, tick density, baseline clarity, end labels, crosshair inspection, and line/area styling.

Layout and animation

height sets the chart height (default 240). margin controls the inner padding (top/right/bottom/left); by default, the right margin is wider (60) to accommodate the Y axis labels.

Animation is enabled on the first render by default (animate: true). You can control timing via duration (default 650 ms) and easing via ease (cubicOut by default; supported values include cubicOut, cubicInOut, linear).

Y axis formatting

RareCharts can format the Y axis automatically or explicitly.

yFormat supports auto (default), percent, and number. In auto mode, the chart treats data as percent-like when the maximum absolute value is ≤ 1 (for example, 0.12 becomes 12%). If you already store values as real numbers and still happen to be below 1, you probably want to force number to avoid accidental percent formatting.

Zero is treated carefully: values with |v| < zeroEpsilon are printed as 0 (default 1e-6). This prevents the classic “-0.00%” or “+0.00%” artifacts that make charts look broken even when the data is correct.

You can also add yPrefix and ySuffix for units. If you need full control, provide yTickFormat: (value) => string and ignore the automatic formatting entirely.

Tick density is controlled by yTicks (default 4). For minimalist displays, yLabelsOnly can be enabled (default true), keeping the axis visually restrained.

By default, the Y axis is rendered on the right side of the chart. If your layout or design system requires a left-aligned axis, you can override this behavior by setting:

yAxisPosition: 'left'

This moves the Y axis to the left while preserving all formatting and scaling logic.

X axis formatting

xTickFormat is a function (date) => string. The default format is MM/DD. For business dashboards you often want clearer labels, especially for longer ranges, for example:

xTickFormat: d3.timeFormat('%b %d')   // Jan 05
// or
xTickFormat: d3.timeFormat('%Y-%m')   // 2026-01
]);

Baseline, grid, and “relative to zero”

The chart renders a grid and a zero baseline layer. This is not a decorative choice: performance charts are usually read relative to zero, so a clear zero reference is essential. (You can still customize how the baseline looks via theme styles.)

End labels

endLabels (default true) renders the last value for each series on the right edge. It is extremely useful in multi-series charts because it reduces legend-hunting: you look at the line, then you read its last value where the story ends.

If you disable it, the chart clears that layer.

Crosshair and tooltip

crosshair is enabled by default. It provides a vertical tracker line, dots at the nearest points, and a tooltip.

You can override tooltip content via:

tooltipFormat: ({ date, points: [{ name, value, color }, …] }) => html

If you need a plain-text tooltip, return simple HTML with minimal markup, or keep the default and let the library handle it.

Line shape, area fills, and markers

Line interpolation is controlled by curve (default monotone). You can use linear, basis, cardinal, step, and other D3 curve names supported by the library. If you choose cardinal, you can tune the smoothing via curveTension (0.1, default 0).

Area under the line can be enabled globally via area: true. areaOpacity defaults to 0.12. areaBaseline supports zero, min, or a numeric value.

Markers (point dots) are supported via markers (default false), with markerShape (default circle) and markerSize (default 4). Markers are useful when data is sparse or you want to emphasize sampling points, but they can clutter dense series, so they’re off by default for a reason.

Per-series overrides

In multi-series mode, you can override some style/shape settings per series, without affecting the rest. Supported per-series fields include curve, strokeWidth, area, areaOpacity, and areaBaseline. This is the clean way to highlight a “main” series, or to render one series as an area while keeping others as plain lines.

Line chart options

Common options shared by all chart types (title, subtitle, legend, legendPosition, source, theme) are documented on the Settings page.