I am using chart js and I have made a line chart. I have tried multiple ways and went through the whole documentation but I cannot find the way to do this. I have tried using the gradient to bring some whitespace between the chart-area-background and line. Do I need to make a plugin for this small requirement? I need a margin or whitespace between the line and the chart area background.
function App() {
var options = {
// layout: {
// padding: {
// left: 50,
// right: 0,
// // top: 100,
// bottom: 100
// }
// },
scales: {
xAxes: [
{
gridLines: {
drawOnChartArea: false,
drawBorder: false
},
ticks: {
display: false
}
}
],
yAxes: [
{
gridLines: {
drawOnChartArea: false,
drawBorder: false
},
ticks: {
display: false
}
}
]
},
maintainAspectRatio: false,
};
const data = canvas => {
const ctx = canvas.getContext("2d");
const gradient = ctx.createLinearGradient(0, 49, 0, 500);
// gradient.addColorStop(0.6, "white");
gradient.addColorStop(0.21, "rgba(226,240,251,1)");
gradient.addColorStop(0.54, "rgba(244,249,253,1)");
gradient.addColorStop(0.8, "rgba(251,253,254,1)");
return {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
lineTension: 0.5,
fill:true,
backgroundColor: gradient,
borderColor: "#347aeb",
borderCapStyle: "butt",
borderDash: [],
borderWidth: 5,
borderDashOffset: 0.0,
borderJoinStyle: "round",
pointBorderColor: "#347AEB",
pointBackgroundColor: "white",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "white",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 10,
pointHitRadius: 10,
// showLine: 0,
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
};
return (
<Line data={data} width={100} height={400} options={options}></Line>
);
}