how to add fill on line diagram?

Question

Usually I should be able to add a fill just by adding the property to the dataset. But I cannot get it to work and I am also unable to find any similar info on it. Maybe there is a plugin missing?

const chartData = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                radius: 0,
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgb(75, 192, 192)',
                tension: 0.1,
                hoverOffset: 4,
                data: [65, 59, 80, 81, 56, 55, 40],
                fill: true
            }]
        }

My CartJS registration looks like this:

import {
    Chart as ChartJS,
    Title,
    Tooltip,
    LineElement,
    LinearScale,
    PointElement,
    CategoryScale,
    Plugin
} from 'chart.js'
import { useConstructionRiskStore } from '../../core/stores/constructionRiskStore'

ChartJS.register(
    Title,
    Tooltip,
    LineElement,
    LinearScale,
    PointElement,
    CategoryScale
)

Its propably just something stupid ... I know.

Answer 1

You have to import and register the Filler plugin for the fill to work when using treeshaking:

import {Chart, Filler} from 'chart.js'
Chart.register(Filler)