I am working on a React JS project. In my project, I need to create line chart components. I am trying to use Chart JS 2 library for React JS. But, now I am having a little problem customising the line chart. I want to remove the grids and the lines in the background (screenshot) and the label at the top of the chart (My first dataset).
This is my code.
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
fill: true,
lineTension: 0.1,
backgroundColor: '#edfce9',
borderColor: '#3DAA1D',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: '#3DAA1D',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: '#3DAA1D',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
showLine: true
}
]
};
<Line data={data} />
How can I do that? Removing the grids (lines) in the background of the chart and removing the label at the top (My First dataset)?
Please take a look at the documentation. You can disable gridlines in the options (which you will have to add) https://www.chartjs.org/docs/2.9.4/axes/cartesian/#common-configuration
options: {
scales: {
yAxes: [
gridLines: {
display: false
}
],
xAxes: [
gridLines: {
display: false
}
]
},
legend: {
display: false
}
}
V3:
options: {
scales: {
x: {
grid: {
display: false
}
},
y: {
grid: {
display: false
}
}
}
}