[Chartjs]-Glow effect on line bar using Chart.js in React

1👍

You can modify the Chart export of react-chart-js2 to give drawn lines a glow.

Example

import { Chart } from 'react-chartjs-2';

// Example taken from https://codepen.io/kurkle/pen/zYYPagB
let draw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function() {
  let chart = this.chart;
  let ctx = chart.ctx;
  let _stroke = ctx.stroke;
  ctx.stroke = function() {
    ctx.save();
    ctx.shadowColor = ctx.strokeStyle;
    ctx.shadowBlur = 5;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 4;
    _stroke.apply(this, arguments);
    ctx.restore();
  };
  draw.apply(this, arguments);
  ctx.stroke = _stroke;
};

Leave a comment