JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<p>
<b style="color: red">red</b> is shadow
</p>
<canvas id="canvas" width="200" height="100"></canvas>
Babel + JSX
const ShadowLineElement = Chart.elements.Line.extend({
draw () {
console.log(this)
const { ctx } = this._chart
const originalStroke = ctx.stroke
ctx.stroke = function () {
ctx.save()
ctx.shadowColor = 'red'
ctx.shadowBlur = 0
ctx.shadowOffsetX = 0
ctx.shadowOffsetY = 8
originalStroke.apply(this, arguments)
ctx.restore()
}
Chart.elements.Line.prototype.draw.apply(this, arguments)
ctx.stroke = originalStroke;
}
})
Chart.defaults.ShadowLine = Chart.defaults.line
Chart.controllers.ShadowLine = Chart.controllers.line.extend({
datasetElementType: ShadowLineElement
})
new Chart(document.getElementById('canvas'), {
type: 'ShadowLine',
data: {
datasets: [
{
label: 'somedata',
fill: false,
borderColor: 'green',
data: [
10, 20
]
}
]
}
})