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!

More Chartjs Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!