New-UDChartJS not Rendering Line Chart as per Docs

PowerShell Universal
1 
Product: PowerShell Universal
Version: 4.0.1

Line chart rendered in docs has fill and smoothed lines (I believe this is “bezierCurve” in ChartJS speak). Actual line chart has neither of these features.

We are testing an upgrade from 2.12.6 where the line charts are rendering as expected.


Example Code

 $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 
 New-UDChartJS -Type 'line' -Data $Data -DataProperty CPU -LabelProperty ProcessName

Expected Output as per Documentation (top) versus Actual Rendering (bottom)

image
image925×900 53.8 KB

I’ve had to combine these into one image since new users are only allowed a single embedded image :wink:

2

+1 for this - I’m seeing this exact same behaviour

3

I can reproduce this. You can work around it by using a dataset and passing in the additional parameters.

$Options = @{
   fill = $true 
   tension = 0.4
}
New-UDChartJSDataSet -AdditionalOptions $Options # ...

That said, we’ll make this the default in 4.0.2

4

Thanks Adam, that works. Looks like 4.0.2 is imminent, so we’ll hang fire for that :+1:

5

Hi Adam, we have upgraded to 4.0.2 and we are still seeing some odd behaviour on our line charts. When using datasets, the chart will plot the dots only, they won’t be joined by lines.

$Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10

New-UDChartJS -Type 'line' -Data $Data -Dataset @(
    New-UDChartJSDataset -DataProperty 'CPU' -Label 'ProcessName' -AdditionalOptions $Options
 ) -LabelProperty 'ProcessName'

Expected Output (top) versus Actual Rendering (bottom)

image
image810×946 14.6 KB

Setting the options explicitly as per above results in expected behaviour. The line charts render correctly in our 2.12.6 instance.

6

I just double checked and this seems to work fine.

New-UDDashboard -Content {
    $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
    $Options = @{
        fill = $true 
        tension = 0.4
    }
    New-UDChartJS -Type 'line' -Data $Data -Dataset @(
        New-UDChartJSDataset -DataProperty 'CPU' -Label 'ProcessName' -AdditionalOptions $Options
    ) -LabelProperty 'ProcessName'
}

image
image1849×903 31.9 KB

Also, what the heck is steam doing on my machine?

EDIT: Nevermind. I see what you are saying. This should work now.

    $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
    New-UDChartJS -Type 'line' -Data $Data -LabelProperty 'ProcessName' -DataProperty CPU

image
image1850×906 38.2 KB

7

Thanks Adam,

The issue would appear to be that the New-UDChartJSDataset now requires the -AdditionalOptions parameter to make the rendering consistent with 2.12.6.

We have added the following options:

$Options = @{
    fill = $true 
    tension = 0.4
    borderWidth = 1
}

I don’t know if that was intended or not, but it’s fine now that we are aware of it. We have updated our charts accordingly.

Thanks for your assistance.