Chart.js Gradient Revenue Chart — Animated Area Chart

Chart.js gets you a working chart in about ten lines. Getting one that looks like it belongs in a designed product takes a handful of specific options, and two of them are the source of nearly every Stack Overflow question about the library.

The gradient that crashes on first render

A vertical gradient under an area line is the most requested Chart.js customization, and the naive version throws:

var g = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom); // TypeError

The reason is ordering. A canvas gradient needs pixel coordinates, and the chart does not know its own plot area until it has laid out — but backgroundColor is read *during* that layout. On the first pass chart.chartArea is genuinely undefined.

The fix is to pass a scriptable option — a function rather than a value — and guard it:

if (!area) return 'rgba(94,234,212,0.18)';

Chart.js calls the function again once layout completes, so the flat fallback color is only ever used for a single frame. The same pattern applies to any option that needs to know the chart's geometry, and it also means the gradient regenerates on resize automatically, which a gradient created once at setup would not.

interaction.mode, the option that fixes tooltips

Default Chart.js only shows a tooltip when the cursor is close to an actual data point. On a smooth line with pointRadius: 0, that means hovering feels broken — the user waves the mouse across the chart and nothing happens.

interaction: { mode: 'index', intersect: false }

intersect: false stops requiring a direct hit, and mode: 'index' selects whichever x-position the cursor is nearest. Together they turn the chart into a continuous readout: move anywhere along it and the tooltip tracks the nearest month. This single option does more for perceived quality than any styling.

Points are then hidden at rest (pointRadius: 0) and only appear on hover (pointHoverRadius: 6) with a background-colored border, which makes the hovered point read as punched out of the line rather than sitting on top of it.

Updating without destroying

The most common mistake in dashboards is calling chart.destroy() and constructing a new chart whenever data changes. That throws away the animation state, so every update flashes.

chart.data.datasets[0].data = d.vals; chart.update('active');

Mutating the data in place and calling update() makes Chart.js interpolate from current values to new ones, so the line visibly glides. The 'active' argument reuses the running animation configuration rather than replaying the initial one. Because the range toggle and the add-a-month button both route through one refresh() function, every update path animates identically and the summary figures can never disagree with the chart.

Styling that gets out of the way

The defaults are built for standalone charts, not embedded panels. Four changes do most of the work:

- legend: { display: false } — a single series does not need a legend explaining it. - grid: { display: false } on the x axis and a very faint rgba(255,255,255,.055) on the y — horizontal guides help read values; vertical ones are noise. - border: { display: false } on both axes — the Chart.js 4 way to remove axis spines, which moved out of gridLines in v3. - maxTicksLimit: 5 — caps y-axis labels regardless of the value range, so the axis never crowds.

tension: 0.38 curves the line. It is worth knowing this is a *smoothing* value with no relationship to the underlying data — high tension on volatile data invents peaks between points that were never measured. For revenue it is honest enough; for anything where exact values matter, keep it low.

Sizing

maintainAspectRatio: false plus a fixed-height wrapper (.crc-canvas { height: 260px }) is the correct pattern for a chart inside a layout. Left on, Chart.js enforces its own aspect ratio and fights your container. The canvas needs a *positioned, sized* parent — sizing the canvas element directly does not work reliably.

Reusing it

Replace FULL with your series and everything downstream follows, including the total and the period-over-period delta. For a sparkline-sized version, drop the axes and tooltip; for a dependency-free alternative, compare area chart or realtime line chart.