How to Remove Line Chart Fill in ChartJS

1 year ago

source link: https://masteringjs.io/tutorials/chartjs/line-chart-fill-color
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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
  }
});