I have a simple radar chart using chart.js, and I'm trying to get the aesthetics similar to:
(Glowing edges by the borders)
To mimic this effect I tried using createRadialgradient and filling the data with that - but for the life of me could not find the center point of the graph in order to create the glow like effect - after thinking about it too, it wouldn't necessarily put the glowing at the borders of the lines, but rather the center of the graph...
Anyone have any ideas?
I was able to achieve something close using the following:
let draw = Chart.controllers.radar.prototype.draw;
Chart.controllers.radar.prototype.draw = function() {
let chart = this.chart;
let ctx = chart.ctx;
let _stroke = ctx.stroke;
ctx.stroke = function() {
ctx.save();
ctx.shadowColor = 'rgba(3, 252, 240, 1)' //ctx.strokeStyle;
ctx.shadowBlur = 40;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
_stroke.apply(this, arguments);
ctx.restore();
};
draw.apply(this, arguments);
ctx.stroke = _stroke;
}
for chartjs with line chart. I use this extension. https://www.npmjs.com/package/chartjs-plugin-style
just follow the steps and then you will get it.