Skip to content
QML bindings for Chart.js
Branch: master
Clone or download
Latest commit fbcfc22 Oct 29, 2018


QML bindings for Charts.js, a simple HTML5 Charts javascript library using the canvas element -

To give QChart.js a try, just clone this repository and use qmlscene.

$ qmlscene QChartGallery.qml



Qt >= 5.0.


This shows how to integrate QChart.js as a jbQuick.Charts submodule into your git project.

$ cd /path/to/project/root/
$ mkdir -p qml/jbQuick
$ git submodule add git:// qml/jbQuick/Charts
$ git commit -a -m "Added QChart.js as a submodule."

When cloning a repository with submodules, use:

$ git clone git://your/project/repository.git
$ git submodule init
$ git submodule update

To update your local submodule, use:

$ git submodule update


Assuming jbQuick is in your qml import path:

import jbQuick.Charts 1.0

QChart.js qmldir provides:

  • Chart QML item inheriting Canvas
  • Charts Javascript library

In addition, Chart provides the following properties:

  • chartAnimated: whether chart data should be animated on initialization
  • chartAnimationEasing: an easing type enumeration provided to a PropertyAnimation
  • chartAnimationDuration: the length (ms) of the animation
  • chartData: a javascript construct of the data set, see Chart.js documentation
  • chartType: a value amongst:
    • Charts.chartType.BAR for a bar chart
    • Charts.chartType.DOUGHNUT for a doughnut chart
    • Charts.chartType.LINE for a line chart
    • Charts.chartType.PIE for a pie chart
    • Charts.chartType.POLAR for a polar chart
    • Charts.chartType.RADAR for a radar chart

The following snippet creates a line chart.

Chart {
  id: chart_line;
  width: 400;
  height: 400;
  chartAnimated: true;
  chartAnimationEasing: Easing.InOutElastic;
  chartAnimationDuration: 2000;
  chartType: Charts.ChartType.LINE;
  Component.onCompleted: {
      chartData = ...;


You can find Charts.js documentation at


QChart.js, just as Charts.js, is available under the [MIT license] (

You can’t perform that action at this time.