Chart.js not showing X,Y Labels and Legend

[yinsw]

I added a chart to my table and the chart able to show on my List Page but it is missing the labels from the X/Y Axis and the Title. The Legend is also not working whether u select or deselect the checkbox, it will also set the display property as "false".

I turned on the debug mode and the JSON looks ok to me but why it's showing the chart but without the labels?

Chart JSON:

{
    "type": "bar",
    "data": {
        "labels": [
            "PMKIOSK04",
            "PMKIOSK06",
            "PMSBKiosk_3"
        ],
        "datasets": [
            {
                "showLine": false,
                "spanGaps": false,
                "steppedLine": false,
                "circular": false,
                "data": [
                    4,
                    17,
                    6
                ],
                "backgroundColor": [
                    "rgba(54,162,235,0.50)",
                    "rgba(255,99,132,0.50)",
                    "rgba(255,159,64,0.50)"
                ],
                "borderColor": [
                    "rgba(54,162,235,1.00)",
                    "rgba(255,99,132,1.00)",
                    "rgba(255,159,64,1.00)"
                ],
                "borderWidth": 1.5,
                "links": null
            }
        ]
    },
    "options": {
        "plugins": {
            "legend": {
                "display": false,
                "fullWidth": false,
                "reverse": false,
                "rtl": false,
                "labels": {
                    "usePointStyle": false
                }
            },
            "title": {
                "display": true,
                "text": "Usage Detail By Machine"
            },
            "tooltip": {
                "enabled": true,
                "mode": "point",
                "intersect": false,
                "displayColors": false,
                "rtl": false
            },
            "filler": {
                "propagate": false
            },
            "stacked100": {
                "enable": false
            },
            "datalabels": {
                "clamp": true,
                "clip": true,
                "display": true
            }
        },
        "animation": {
            "animateRotate": false,
            "animateScale": false
        },
        "scales": {
            "y": {
                "beginAtZero": true
            }
        },
        "responsive": false
    }
}

[arbei]

By default legend is for multiple series charts or some single series charts (Pie, Doughnut, PolarArea) only. If you want to force legend for other charts, you may use Chart_Rendered server event to set the "plugins.legend.display" setting to true.

[yinsw]

How about the labels for my X & Y axis? Currently it's totally blank. It's only showing the bar chart without any other text. If you see the JSON response, it does have value for the "labels"

[yinsw]

I found out the problem was due to the Light/Dark theme. I'm not sure what happen, but switching to one of the theme causing all the labels text colour becomes white causing it missing in the List Page. I found out when I try to Export to Printer Friendly, it shows up all ok.

Is it by design, all the table headers is dark colour instead of the theme colour when in Dark Mode?

I've disabled the dark-mode in the Theme setting and now the chart displayed correctly.

[arbei]

Chart.js does not have buitl-in support for dark mode, you do need to add some adjustments yourself.