Comments (13)
rjaros
commented on June 12, 2024
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 ...
from kvision.
chavu
commented on June 12, 2024
Yes I upgraded chartjs-plugin-datalabels to 2.2.0.
I am using Chrome on Windows 11 Pro. I also tried MS-Edge
from kvision.
rjaros
commented on June 12, 2024
How about this sample: https://codepen.io/2uk3y/pen/rNPyPgW
Is it working for you?
from kvision.
chavu
commented on June 12, 2024
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)
from kvision.
rjaros
commented on June 12, 2024
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).
from kvision.
rjaros
commented on June 12, 2024
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?
from kvision.
chavu
commented on June 12, 2024
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)
)
)
from kvision.
rjaros
commented on June 12, 2024
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.
from kvision.
chavu
commented on June 12, 2024
oh, sorry I missunderstood. See in image below on what is on line 125
from kvision.
rjaros
commented on June 12, 2024
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?
from kvision.
chavu
commented on June 12, 2024
It's okay. I appreciate your effort. I will prepare a sample proejct and share later.
from kvision.
rjaros
commented on June 12, 2024
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.
from kvision.
vladstanescu
commented on June 12, 2024
Having the same issue on NodeJS generating PNG.
from kvision.
Related Issues (20)
- request url of KVService is using related path instead of absolute path HOT 2
- Tabulator vertical scrolling issue HOT 7
- Initial value for DateTime control HOT 1
- Request - support for crossorigin attribute in Image (and others) HOT 1
- Ability to intercept image load errors HOT 2
- Component lifecycle HOT 6
- StackPanel seems to not indexing components properly HOT 4
- Wrong module in kvision.gitbook.io. HOT 1
- trying to generate .pot files HOT 12
- overrides of `SimplePanel.AddAll` call refresh outside of a `singleRender` wrapper. HOT 1
- Allow KVService to have arguments with GET HOT 6
- Allow modifying response headers for Spring Boot and Micronaut apps HOT 1
- remove id parameter on get requests HOT 1
- Can't get data from Tabulator.RowComponent HOT 2
- Expandable/collapsible fieldset or panel HOT 2
- How to attch files using the Richtext Component HOT 7
- duplicated different word in kvision docs HOT 1
- did you consider to integrate kvision with ktor client? HOT 5
- can't make tabulator selectable with kvision v7.4.4 HOT 2
- My tabulator not selecting data HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from kvision.