Cannot read properties of null (reading 'x')

[chavu]

I am getting the error below when I add code to display labels on Pie-chart. On other types of charts it's workign okay. Thiss issue started after upgrading Kvision to lastest version.

Cannot read properties of null (reading 'x')
TypeError: Cannot read properties of null (reading 'x')
    at orient (webpack-internal:///../../node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js:125:19)
    at Object.fallback [as positioner] (webpack-internal:///../../node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js:349:13)
    at coordinates (webpack-internal:///../../node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js:845:21)
    at Object.draw (webpack-internal:///../../node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js:1016:18)
    at Object.afterDatasetsDraw (webpack-internal:///../../node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js:1309:12)
    at Object.callback (webpack-internal:///../../node_modules/chart.js/dist/chunks/helpers.segment.cjs:81:19)
    at PluginService._notify (webpack-internal:///../../node_modules/chart.js/dist/chart.cjs:5075:33)
    at PluginService.notify (webpack-internal:///../../node_modules/chart.js/dist/chart.cjs:5058:29)
    at Chart.notifyPlugins (webpack-internal:///../../node_modules/chart.js/dist/chart.cjs:6340:30)
    at Chart._drawDatasets (webpack-internal:///../../node_modules/chart.js/dist/chart.cjs:6083:14)

My code for displaying the chart is as below.

    chart(
                                        Configuration(
                                            ChartType.PIE,
                                            listOf(
                                                    DataSets(
                                                            data = listOf(resolved, notResolved),
                                                            backgroundColor = listOf(
                                                                    Color.hex(0x3cba9f),
                                                                    Color.name(Col.RED)
                                                            )
                                                    )
                                            ),
                                            listOf(
                                                I18n.tr("Resolved"),
                                                I18n.tr("Not resolved"),
                                            ),
                                            options = ChartOptions(
                                                responsive = false,
                                                pluginsDynamic = obj {
                                                    datalabels = obj {
                                                        this.anchor = "end"
                                                        this.align = "end"
                                                    }
                                                }
                                            ),
                                            plugins = listOf(datalabelsPlugin)
                                        ),
                                        chartHeight = 350,
                                        chartWidth = 350,
                                    )

[rjaros]

This code works fine for me (I've just used data = listOf(5, 6) , but I suppose your data is also correct). Have you upgraded chartjs-plugin-datalabels to 2.2.0? What browser/OS do you use (I've tested firefox and chrome on Linux)? I see there is an issue chartjs/chartjs-plugin-datalabels#402 opened, but the attached codepen example works fine for me as well ...

[chavu]

Yes I upgraded chartjs-plugin-datalabels to 2.2.0.
I am using Chrome on Windows 11 Pro. I also tried MS-Edge

[rjaros]

How about this sample: https://codepen.io/2uk3y/pen/rNPyPgW
Is it working for you?

[chavu]

But your sampel is not using datalabels pligin, is it! My pie chart are working okay if I remove/comment out these lines from the above code.

options = ChartOptions(
                                                responsive = false,
                                                pluginsDynamic = obj {
                                                    datalabels = obj {
                                                        this.anchor = "end"
                                                        this.align = "end"
                                                    }
                                                }
                                            ),
                                            plugins = listOf(datalabelsPlugin)

[rjaros]

It's not my sample. It's from the issue I've mentioned earlier. I'm asking because the sample works fine for me (and perhaps doesn't work for you).

[rjaros]

There is one more thing. Your stacktrace shows an error in /chartjs-plugin-datalabels.esm.js:125:19. But on my system there is nothing reading x property in line number 125 of chartjs-plugin-datalabels.esm.js file. Could you check, what exactly do you have in this file in line 125?

[chavu]

The below lines are starting at line 125.

scales = mapOf(
                         "y" to ChartScales(suggestedMin = 0, suggestedMax = (state.chartDataTestCaseStatus.maxOfOrNull { it.value }
                                                                        ?: 0) + 2),
                       ),

the lines are part of the chart code below.

chart(
                                            Configuration(
                                                    ChartType.BAR,

                                                    listOf(
                                                            DataSets(
                                                                    data = state.chartDataTestCaseStatus.map { it.value },
                                                                    backgroundColor = listOf(
                                                                            Color.hex(0x3e95cd),
                                                                            Color.hex(0x8e5ea2),
                                                                            Color.hex(0x3cba9f),
                                                                            Color.hex(0xe8c3b9),
                                                                            Color.hex(0xc45850)
                                                                    ),
                                                            ),


                                                            ), state.chartDataTestCaseStatus.map { it.variable },


                                                    ChartOptions(
                                                        scales = mapOf(
                                                                "y" to ChartScales(suggestedMin = 0, suggestedMax = (state.chartDataTestCaseStatus.maxOfOrNull { it.value }
                                                                        ?: 0) + 2),
                                                        ),


                                                        plugins = PluginsOptions(
                                                                legend = LegendOptions(display = false),
                                                                title = TitleOptions(display = false),
                                                        ),
                                                        rotation = 270.0,
                                                        pluginsDynamic = obj {
                                                            datalabels = obj {
                                                                this.anchor = "end"
                                                                this.align = "end"
                                                            }
                                                        }
                                                    ),
                                                plugins = listOf(datalabelsPlugin)
                                            )
                                    )

[rjaros]

I was referring to the build/js/node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js file of the chartjs plugin, not your Kotlin sources.

[chavu]

oh, sorry I missunderstood. See in image below on what is on line 125

[rjaros]

It's the same for me. There is no reading x here, but I suppose there must be some shift in line numbering in the stacktrace.
I'm afraid I can't help you without reproducing the problem on my system. Maybe you can share your whole project or prepare some simple reproducible example?

[chavu]

It's okay. I appreciate your effort. I will prepare a sample proejct and share later.

[rjaros]

It seems there is a problem with a plugin: chartjs/chartjs-plugin-datalabels#141 . The issue is old and closed but the comments are fresh. Probably you need to wait for the new plugin release.

[vladstanescu]

Having the same issue on NodeJS generating PNG.