Adjusting dataset options in New-UDChartJSDataset

[ClarkRSD]

Steps to Reproduce

When creating charts with Chart.js, there is no background fill any longer and this cannot be adjusted as far as I can tell.

Looking at the source for the function, it shows that using the -AdditionalOptions switch should allow for me to be able to make adjustments to the datasets properties. One of these is the property for enabling fill on the chart. See Chart.js's area chart example for how this is applied. I did see that there is area charts as an option but I couldn't find any documentation on it so I'm unsure how to get it to work or if it even works at all.

Can this be looked into to see why the fill isn't being applied? See my code examples below for details. It seems to be working with tension, but does not work with the background fill specifically.

New-UDDashboard -Title 'PowerShell Universal' -Pages @(
    New-UDPage -Name "Home" -Blank -Content {
        New-UDElement -Id "Chart" -Tag div -Content {
            $SomeData = @(
                [PSCustomObject]@{Name = "User 1"; Tickets = 1}
                [PSCustomObject]@{Name = "User 2"; Tickets = 74}
                [PSCustomObject]@{Name = "User 3"; Tickets = 69}
                [PSCustomObject]@{Name = "User 4"; Tickets = 25}
                [PSCustomObject]@{Name = "User 5"; Tickets = 60}
            )

            $Dataset = New-UDChartJSDataset -DataProperty Tickets -Label "Tickets" -AdditionalOptions @{fill = $true; tension = 0.3} -BackgroundColor Yellow -BorderColor Green -BorderWidth 1

            New-UDChartJS -Type line -Data $SomeData -Dataset @($Dataset) -LabelProperty "Name"
        }
    }
)

const labels = ['User 1','User 2','User 3','User 4','User 5'];
const data = {
  labels: labels,
  datasets: [{
    label: 'Tickets',
    data: [1, 74, 69, 25, 60],
    fill: true,
    backgroundColor: 'yellow',
    borderColor: 'green',
    tension: 0.3
  }]
};

const config = {
  type: 'line',
  data: data,
};

Expected behavior

https://i.imgur.com/U1RmR9I.png

*Screenshot taken from built-in editor in Chart.js to showcase intended visualization*

Actual behavior

https://i.imgur.com/aNmQivw.png

Environment data

Viewed in Microsoft Edge PowerShell Universal: 3.7.13

Visuals

No response

[adamdriscoll]

We had to register the "filler" plugin. 😖

[ClarkRSD]

Oh I see! Didn't even realize it was a plugin! Thank you for doing that :)