JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="lineChart" width="600" height="400"></canvas>
JavaScript
Chart.types.Line.extend({
name: "LineAlt",
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var ctx = this.chart.ctx;
var scale = this.scale;
ctx.save();
ctx.fillStyle = this.datasets[0].fillColor;
ctx.beginPath();
ctx.moveTo(scale.calculateX(0), scale.calculateY(0))
this.datasets[0].points.forEach(function (point) {
ctx.lineTo(point.x, point.y);
})
ctx.closePath();
ctx.fill();
ctx.fillStyle = this.datasets[1].fillColor;
ctx.beginPath();
ctx.moveTo(scale.calculateX(0), scale.calculateY(0))
this.datasets[1].points.forEach(function (point) {
ctx.lineTo(point.x, point.y);
})
ctx.closePath();
ctx.fill();
ctx.restore();
}
});
var chartData = {
labels: ["9 /15 /15", "9 /28 /15", "10 /5 /15", "10 /13 /15", "10 /19 /15", "10 /30 /15", "11 /15 /15"],
datasets: [
{
fillColor: "rgba(255, 52, 21, 0.2)",
pointColor: "#da3e2f",
strokeColor: "#da3e2f",
data: [200000, 180000, 150000, 110000, 60000, 0, 0]
},
{
fillColor: "rgba(52, 21, 255, 0.2)",
strokeColor: "#1C57A8",
pointColor: "#1C57A8",
data: [-300000, -300000, -300000, -150000, -150000, -20000, 0]
},
]
}
var ctx = document.getElementById("lineChart").getContext("2d");
var myNewChart = new Chart(ctx).LineAlt(chartData, {
bezierCurve: false,
datasetFill: false
});