webdevpuneet.com

Related Snippets

93 in Charts category
51–56 of 60

Chart.js Gradient Revenue Chart

Gradient Stat Ring

Dumbbell Chart

Range Area Chart

Timeline Chart

Lollipop Chart

Chart.js Gradient Revenue Chart — Animated Area Chart

Chart.js Gradient Revenue Chart · Charts · Plain HTML, CSS & JS · Live preview

CategoryCharts
TagsCanvasData VisualizationJS Libraries

Copy & paste

Source Code

Requires
JS · chart.umd.js
<div class="crc-card">
  <div class="crc-top">
    <div>
      <span class="crc-tag">chart.js · scriptable gradient</span>
      <h2>Revenue</h2>
      <div class="crc-figure"><b id="crcTotal">$0</b><span class="crc-delta" id="crcDelta">+0%</span></div>
    </div>
    <div class="crc-ranges" id="crcRanges">
      <button class="crc-chip" data-range="6">6M</button>
      <button class="crc-chip is-on" data-range="12">12M</button>
    </div>
  </div>

  <div class="crc-canvas"><canvas id="crcChart"></canvas></div>

  <button class="crc-add" id="crcAdd">Add this month</button>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Scriptable gradient fill
A function option that regenerates the gradient on every resize.
chartArea guard
Returns a fallback on the first layout pass instead of crashing.
Index-mode tooltips
intersect false means hovering anywhere reads the nearest month.
Punched-out hover points
Hidden at rest, revealed with a background-colored border.
Animated data updates
update("active") interpolates instead of tearing the chart down.
One refresh path
Range toggle and append share a function, so figures never drift.
Dashboard-grade styling
No legend, no vertical grid, no axis spines, capped tick count.
Container-driven sizing
maintainAspectRatio false with a fixed-height wrapper.

About this UI Snippet

Chart.js Gradient Revenue Chart — Scriptable Options and Animated Updates

Screenshot of the Chart.js Gradient Revenue Chart snippet rendered live

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.

Step by step

How to Use

  1. 1
    Add the Chart.js CDNInclude the chart.umd build from the CDN panel — global Chart.
  2. 2
    Paste HTML, CSS, and JSA gradient area chart animates in with a live total and delta.
  3. 3
    Hover anywhereIndex-mode tooltips track the nearest month without needing a direct hit.
  4. 4
    Switch the range6M and 12M mutate the dataset and animate between them.
  5. 5
    Add a monthNew points glide in — the chart is updated, never destroyed.
  6. 6
    Plug in your dataReplace the FULL array; total and delta derive from it.

Real-world uses

Common Use Cases

SaaS revenue dashboards
Make the headline revenue chart above a metric card grid look like part of a designed product, using a scriptable gradient fill.
Analytics panels
Show traffic or conversion trends with period chips, and use index-mode tooltips so hovering anywhere on the chart reads the nearest month.
Finance and billing pages
Display spend over time with an honest baseline, with hover points that are hidden at rest and revealed with a punched-out border.
Admin overview screens
Pair with a stats card row to give an admin landing page both the headline numbers and the shape of the trend behind them.
Learning Chart.js scriptable options
Study the chartArea guard that returns a fallback on first layout instead of crashing, one of the most common sources of Chart.js gradient errors.
Related: Dumbbell Chart
See the Dumbbell Chart for a related charts pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

A canvas gradient needs pixel coordinates from chart.chartArea, but backgroundColor is read during layout — before the chart knows its own plot area. On the first pass chartArea is undefined. Passing a scriptable function that returns a flat fallback color when chartArea is missing fixes it, and Chart.js calls the function again after layout so the gradient appears immediately.

Chart.js defaults to requiring the cursor to intersect an actual data point, which feels broken on a smooth line with hidden points. Setting interaction to { mode: "index", intersect: false } removes the hit requirement and selects the nearest x position instead, so hovering anywhere over the plot reads the nearest value.

Destroying discards the animation state, so every data change flashes. Mutating chart.data in place and calling chart.update() makes Chart.js interpolate from the current values to the new ones, so the line glides. Passing "active" reuses the running animation configuration rather than replaying the initial entrance.

It applies bezier smoothing between points. It is purely cosmetic and has no relationship to the underlying data, so high tension on volatile series invents visual peaks between measurements that never existed. It is fine for a smooth revenue trend, but keep it low or at zero wherever exact values matter.

Left on, Chart.js enforces its own width-to-height ratio and fights whatever container it is in. Turning it off and giving the canvas a positioned parent with an explicit height lets the layout own the sizing. Setting dimensions on the canvas element directly does not work reliably.

react-chartjs-2 and vue-chartjs wrap the lifecycle for you and accept the same data and options objects. With the vanilla build, create the chart in a mount effect against a canvas ref, keep the instance in a ref, and call chart.destroy() in cleanup or remounts leak canvases. Update by mutating the instance data and calling update() rather than recreating on every render.