How to Remove Line Chart Fill in ChartJS
Aug 18, 2022
To remove line fill from your line charts in ChartJS, simply add the fill: false property to each of the objects in your datasets array.
const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'Example Data',
fill: false, // <-- Set `fill: false` here
data: [12, 19, 3, 5, 2, 3]
}]
},
options: {
responsive: true
}
});Changing the Fill Color
To change the fill color, set fill: true and set the backgroundColor option as follows.
const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'Example Data',
backgroundColor: '#ffd700',
data: [12, 19, 3, 5, 2, 3]
}]
},
options: {
responsive: true
}
});
Did you find this tutorial useful? Say thanks by starring our repo on GitHub!