I want to create this kind of color under a line chart.
I searched for a solution but can't find one that uses react-chart-js2. I want to do this without using the plugin.
Well this should work very easy out-of-the-box (no plugin needed), you just need to set the backgroundColor
property to a function, that outputs a gradient. (And set the fill
property to the desired values).
Although, I can't say how you would have to integrate this with react
, this is plain chartjs.
Here a demo, how I would do this:
(based on this official example )
The function for the gradient getGradient
was taken from the above mentioned example.
const lineChartData = {
labels: [
'01/22',
'02/22',
'03/22',
'04/22',
'05/22',
'06/22',
'07/22',
'08/22',
],
datasets: [
{
label: 'Profit',
data: [2.4, 2.6, 2.23, 1.2, -2.2, -3.6, -1, 0.2],
borderColor: '#0B9564',
pointBackgroundColor: 'transparent',
pointBorderColor: 'transparent',
borderJoinStyle: 'bevel',
// the following 2 properties are the ones that need to be set
fill: {
value: -25,
},
backgroundColor: (context) => {
const chart = context.chart;
const {ctx, chartArea} = chart;
if (!chartArea) {
// This case happens on initial chart load
return;
}
return getGradient(ctx, chartArea);
},
},
],
};
let width, height, gradient;
function getGradient(ctx, chartArea) {
const chartWidth = chartArea.right - chartArea.left;
const chartHeight = chartArea.bottom - chartArea.top;
if (!gradient || width !== chartWidth || height !== chartHeight) {
// Create the gradient because this is either the first render
// or the size of the chart has changed
width = chartWidth;
height = chartHeight;
gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
gradient.addColorStop(1, 'rgba(0,128, 0, 1)');
gradient.addColorStop(.25, 'rgba(0,128, 0, 0)');
}
return gradient;
}
const config = {
type: 'line',
data: lineChartData,
options: {
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
labels: {
usePointStyle: true,
},
}
},
}
};
var myChart = new Chart(
document.getElementById('chart'),
config
);
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>
<div class="chart" style="height:184px; width:350px;">
<canvas id="chart" ></canvas>
</div>
Checkout: the documentation for details on the color properties / features and the line Chart properties