chart.js version 2.0 is not working in QML canvas
See original GitHub issueI am trying to integrate Chart.js latest version 2.7 to QML canvas.
Below is the code i am using to draw bar chart.
import QtQuick 2.6
import QtQuick.Window 2.2
import "Chart.bundle.js" as Chart
Window {
id:qmlwindow
visible: true
width: 400
height: 400
title: qsTr("Pie Chart")
Canvas {
id: canvas
width: 400
height: 400
onPaint: {
// Get drawing context
var context = getContext("2d");
var myChart = new Chart(context, {
type: 'bar',
data: {
labels: ["M", "T", "W", "T", "F", "S", "S"],
datasets: [{
label: 'apples',
backgroundColor: "rgba(153,255,51,1)",
data: [12, 19, 3, 17, 28, 24, 7],
}, {
label: 'oranges',
backgroundColor: "rgba(255,153,0,1)",
data: [30, 29, 5, 5, 20, 3, 10],
}]
}
});
myChart.draw();
}
}
}
But bar chart is not drawing in the window. It will be very helpful you have any idea about this.
Note: I commented window and animation parts in the Chart.js. Because window is not supported in QML canvas.
Thanks In advance
Edit(SB): code formatting
Issue Analytics
- State:
- Created 6 years ago
- Comments:14 (4 by maintainers)
Top Results From Across the Web
3.x Migration Guide - Chart.js
Completely rewritten animation system; Rewritten filler plugin with numerous bug fixes; Documentation migrated from GitBook to Vuepress; API ...
Read more >Dynamically update values of a chartjs chart - Stack Overflow
My problem is that after I created the chart, I do not know how to update its values correctly... My code: var ctx...
Read more >Canvas QML Type | Qt Quick 6.4.1
Provides a 2D canvas item enabling drawing via JavaScript. More... Import Statement: import QtQuick. Since: Qt 5.0. Inherits: Item ...
Read more >How to create charts in QML? - Ask Ubuntu
You can use QChart.js - QML bindings for Charts.js (a simple HTML5 Charts javascript library using the canvas element).
Read more >ChartJs latest version not working - QuickChart
Your config is constructed incorrectly. datalabels belongs inside options.plugins . See datalabels documentation or this datalabels example.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Note that we have recently also provided a small adaptor: https://github.com/Elypson/ChartJs2QML It is not perfect but it is capable of way more than what existing solutions provide. At least, for our personal projects, it’s a nice fit. Maybe, it is of some help for others.
I started integrating Chart.js to QML and that was the reason I’m now part of the Chart.js team 😃. The platform stuff has been actually implemented to allow these kind of integration. Since, I switched project and stopped this QML plugin, but if some are interested in testing my wip, I can try to share it!