Chartjs-React line chart shadows (Chart.js)

by

2👍

✅

If you register a plugin, this is used for all charts instances in the application.
You should set it as an "inline" plugin, in the chart instance where you want to use it (hopefully react-chartjs-2 syntax is correct):

const myPlugin = {
      id: 'customShadow',
      beforeDraw: (chart) => {
        const ctx = chart.ctx;
        ctx.save();

        const originalLineDraw = ctx.stroke;
        ctx.stroke = function () {
          ctx.save();
          ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
          ctx.shadowBlur = 10;
          ctx.shadowOffsetX = 4;
          ctx.shadowOffsetY = 4;
          originalLineDraw.apply(this, arguments);
          ctx.restore();
        };
      }
    };

return chartData.labels ? <Line data={data} options={options} plugins={[myPlugin]}/> : null;

Leave a comment