question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

chart.js version 2.0 is not working in QML canvas

See original GitHub issue

I 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:closed
  • Created 6 years ago
  • Comments:14 (4 by maintainers)

github_iconTop GitHub Comments

4reactions
MichaelVoelkelcommented, Feb 25, 2020

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.

2reactions
simonbrunelcommented, Nov 17, 2017

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!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found