score:11

adding a drop shadow for line charts

you can extend the line chart type to do this

preview

script

chart.types.line.extend({
    name: "linealt",
    initialize: function () {
        chart.types.line.prototype.initialize.apply(this, arguments);

        var ctx = this.chart.ctx;
        var originalstroke = ctx.stroke;
        ctx.stroke = function () {
            ctx.save();
            ctx.shadowcolor = '#000';
            ctx.shadowblur = 10;
            ctx.shadowoffsetx = 8;
            ctx.shadowoffsety = 8;
            originalstroke.apply(this, arguments)
            ctx.restore();
        }
    }
});

and then

...
var mychart = new chart(ctx).linealt(data, {
    datasetfill: false
});

fiddle - https://jsfiddle.net/7kbz1l4t/

potatopeelings 39605

score:0

this works for new version of chart js we can create a plugin object and register to the chart js, plugins are a way for a developer to modify a chart as it is being created, for reference please look at

https://riptutorial.com/chart-js/example/22332/plugins-introduction

example plugin to add a shadow to any of the chart

var simpleplugin = {
beforedraw : function(chartinstance)
{

    let _stroke = chartinstance.ctx.stroke;
    chartinstance.ctx.stroke = function () {

        chartinstance.ctx.save();
        chartinstance.ctx.shadowcolor = 'gray';
        chartinstance.ctx.shadowblur = 10;
        chartinstance.ctx.shadowoffsetx = 2;
        chartinstance.ctx.shadowoffsety = 2;
        _stroke.apply(this, arguments)
        chartinstance.ctx.restore();
    }

    let _fill = chartinstance.ctx.fill;
    ctx.fill = function () {

        chartinstance.ctx.save();
        chartinstance.ctx.shadowcolor = 'gray';
        chartinstance.ctx.shadowblur = 10;
        chartinstance.ctx.shadowoffsetx = 2;
        chartinstance.ctx.shadowoffsety = 2;
        _fill.apply(this, arguments)
        chartinstance.ctx.restore();
    }
}

}

$(function()
{
    chart.pluginservice.register(simpleplugin);
});

r.stela 53

score:6

𝚂𝚘𝚕𝚞𝚝𝚒𝚘𝚗 𝚏𝚘𝚛 𝙲𝚑𝚊𝚛𝚝𝙹𝚂 𝟸.𝚡.𝚡

ᴘʀᴇᴠɪᴇᴡ

ꜱᴄʀɪᴘᴛ ^{overriding the draw function}

let draw = chart.controllers.line.prototype.draw;
chart.controllers.line.prototype.draw = function() {
    draw.apply(this, arguments);
    let ctx = this.chart.chart.ctx;
    let _stroke = ctx.stroke;
    ctx.stroke = function() {
        ctx.save();
        ctx.shadowcolor = '#07c';
        ctx.shadowblur = 10;
        ctx.shadowoffsetx = 0;
        ctx.shadowoffsety = 4;
        _stroke.apply(this, arguments);
        ctx.restore();
    }
};

let draw = chart.controllers.line.prototype.draw;
chart.controllers.line.prototype.draw = function() {
    draw.apply(this, arguments);
    let ctx = this.chart.chart.ctx;
    let _stroke = ctx.stroke;
    ctx.stroke = function() {
        ctx.save();
        ctx.shadowcolor = '#07c';
        ctx.shadowblur = 10;
        ctx.shadowoffsetx = 0;
        ctx.shadowoffsety = 4;
        _stroke.apply(this, arguments);
        ctx.restore();
    }
};

let ctx = document.queryselector("#canvas").getcontext('2d');
let mychart = new chart(ctx, {
    type: 'line',
    data: {
        labels: ["january", "february", "march", "april", "may", "june", "july"],
        datasets: [{
            data: [65, 59, 75, 64, 70, 30, 40],
            bordercolor: '#07c',
            pointbackgroundcolor: "#fff",
            pointbordercolor: "#07c",
            pointhoverbackgroundcolor: "#07c",
            pointhoverbordercolor: "#fff",
            pointradius: 4,
            pointhoverradius: 4,
            fill: false,
            tension: 0.15
        }]
    },
    options: {
        responsive: false,
        tooltips: {
            displaycolors: false,
            callbacks: {
                label: function(e, d) {
                    return `${e.xlabel} : ${e.ylabel}`
                },
                title: function() {
                    return;
                }
            }
        },
        legend: {
            display: false
        },
        scales: {
            yaxes: [{
                ticks: {
                    max: 90
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.5.0/chart.min.js"></script>
<canvas id="canvas" width="400" height="210" style="background-color: #e4e8f0"></canvas>

ɢʀᴜɴᴛ 30087

[Solved]-Styling Bars and Lines with Chart.js-Chart.js

adding a drop shadow for line charts

𝚂𝚘𝚕𝚞𝚝𝚒𝚘𝚗 𝚏𝚘𝚛 𝙲𝚑𝚊𝚛𝚝𝙹𝚂 𝟸.𝚡.𝚡

Related Query

More Query from same tag