kvision
kvision copied to clipboard
rjaros
Cannot read properties of null (reading 'x')
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,
)
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 https://github.com/chartjs/chartjs-plugin-datalabels/issues/402 opened, but the attached codepen example works fine for me as well ...
Yes I upgraded chartjs-plugin-datalabels to 2.2.0. I am using Chrome on Windows 11 Pro. I also tried MS-Edge
How about this sample: https://codepen.io/2uk3y/pen/rNPyPgW Is it working for you?
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)
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).
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?
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)
)
)
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.
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?
It's okay. I appreciate your effort. I will prepare a sample proejct and share later.
It seems there is a problem with a plugin: https://github.com/chartjs/chartjs-plugin-datalabels/issues/141 . The issue is old and closed but the comments are fresh. Probably you need to wait for the new plugin release.
