Search code examples
quickchart

Auto scaling y-axis

Version 1

If I do the following in PowerShell:

$json = @"

{
    "chart": {
        "data": {
            "labels": [
                "2022-06-30",
                "2022-07-01",
                "2022-07-05",
                "2022-07-06",
                "2022-07-07"
            ],
            "datasets": [
                {
                    "data": [
                        5801404000000.0,
                        6060626000000.0,
                        6085791000000.0,
                        6035882000000.0,
                        6053350000000.0
                    ],
                    "label": "Net Liquidity"
                }
            ]
        },
        "options": {
            "scales": {}
        },
        "type": "bar"
    }
}

"@

Invoke-RestMethod -Method Post -Uri 'https://quickchart.io/chart' -Body $json -ContentType 'application/json' -OutFile C:\temp\test-2.png

Start-Process C:\temp\test-2.png

I get the following:

enter image description here

Looks good! Note that the y-axis is scaled appropriately.

Version 2

However, if I do the following instead:

$json = @"

{
    "chart": {
        "data": {
            "labels": [
                "2022-06-30",
                "2022-07-01",
                "2022-07-05",
                "2022-07-06",
                "2022-07-07"
            ],
            "datasets": [
                {
                    "data": [
                        5801404000000.0,
                        6060626000000.0,
                        6085791000000.0,
                        6035882000000.0,
                        6053350000000.0
                    ],
                    "label": "Net Liquidity"
                }
            ]
        },
        "options": { },
        "type": "bar"
    }
}

"@

Invoke-RestMethod -Method Post -Uri 'https://quickchart.io/chart' -Body $json -ContentType 'application/json' -OutFile C:\temp\test-2.png

Start-Process C:\temp\test-2.png

I get the following:

enter image description here

Note that the y-axis now starts at 0.

Differences

Version 1 uses:

"options": {
            "scales": {}
        },

while version 2 uses:

"options": { },

Question

Is this a bug in quickchart? Or is this behaviour intentional? If so, is this documented somewhere?

Solution

  • QuickChart sets ticks.beginAtZero by default if the scales object is not set. This is an unfortunate inconsistency with the vanilla Chart.js v2 renderer, but it persists for backwards compatibility reasons (here's a code pointer to the open source version).

    You can avoid this by setting options.scales yourself (as you observed), or by using Chart.js v3 which does not include any default behavior.