Shadows support?

[Scoolnik]

Hi!

Will there be shadows support in the future?

tried to find a roadmap, but no luck..
Only found some issues and tutorials on how to add shadows :)

[manimovassagh]

Chart.js does not have built-in shadow support as a first-class option on elements, but the Canvas 2D API that Chart.js renders on top of does support shadows. You can apply them through a plugin:

const shadowPlugin = {
  id: "shadow",
  beforeDatasetsDraw(chart) {
    const ctx = chart.ctx;
    ctx.save();
    ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 4;
    ctx.shadowOffsetY = 4;
  },
  afterDatasetsDraw(chart) {
    chart.ctx.restore();
  },
};

new Chart(ctx, {
  type: "bar",
  data: { /* ... */ },
  plugins: [shadowPlugin],
});

This sets the canvas shadow properties before Chart.js draws the datasets, so every element (bars, lines, points, pie slices) gets a shadow. After drawing, it restores the context so axis labels and other UI elements are not affected.

You can be more selective by using beforeDatasetDraw (singular) which fires per dataset, and conditionally applying shadows based on the dataset index.

For line charts specifically, if you want a shadow only on the line (not the points), you can hook into beforeDatasetDraw and check the element type:

beforeDatasetDraw(chart, args) {
  const ctx = chart.ctx;
  ctx.save();
  ctx.shadowColor = "rgba(0, 0, 0, 0.25)";
  ctx.shadowBlur = 8;
  ctx.shadowOffsetX = 3;
  ctx.shadowOffsetY = 3;
},
afterDatasetDraw(chart) {
  chart.ctx.restore();
}

As for the roadmap — there is no public plan to add shadow as a native element property. The plugin approach is the intended way to extend rendering behavior like this, and it works well in practice.