added possibility to animate to changes, fixed rectangles in bars to display with borders more like expected and fixed licensing

Author: MichaelV

Chart.bundle.js

@@ -4669,20 +4669,18 @@ var element_rectangle = core_element.extend({
 		var outer = rects.outer;
 		var inner = rects.inner;
 
-		ctx.fillStyle = vm.backgroundColor;
-		ctx.fillRect(outer.x, outer.y, outer.w, outer.h);
+		ctx.save();
 
-		if (outer.w === inner.w && outer.h === inner.h) {
-			return;
+		if (outer.w !== inner.w || outer.h !== inner.h) {
+			ctx.beginPath();
+			ctx.strokeStyle = vm.borderColor;
+			ctx.strokeRect(inner.x, inner.y, inner.w, inner.h);
+			ctx.fill('evenodd');
 		}
 
-		ctx.save();
-		ctx.beginPath();
-		ctx.rect(outer.x, outer.y, outer.w, outer.h);
-		ctx.clip();
-		ctx.fillStyle = vm.borderColor;
-		ctx.rect(inner.x, inner.y, inner.w, inner.h);
-		ctx.fill('evenodd');
+		ctx.fillStyle = vm.backgroundColor;
+		ctx.fillRect(inner.x, inner.y, inner.w, inner.h);
+
 		ctx.restore();
 	},
 

Chart.qml

@@ -103,6 +103,13 @@ Canvas {
         jsChart.draw(chartAnimationProgress);
     }
 
+    function animateToNewData()
+    {
+        chartAnimationProgress = 0.1;
+        jsChart.update();
+        chartAnimator.restart();
+    }
+
     onWidthChanged: {
         if(jsChart) {
             jsChart.resize();

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 IceMichael
+Copyright (c) 2020 ChartJs2QML contributors (starting with Elypson, Michael A. Voelkel, https://github.com/Elypson)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

animationExample.qml

@@ -0,0 +1,104 @@
+/*!
+ * Elypson's Chart.qml adaptor to Chart.js
+ * (c) 2020 ChartJs2QML contributors (starting with Elypson, Michael A. Voelkel, https://github.com/Elypson)
+ * Released under the MIT License
+ */
+
+ import QtQuick 2.0
+ import QtQuick.Window 2.0
+ import "Chart.bundle.js" as Chart
+
+ Window {
+     id: myWindow
+     width: 800
+     height: 800
+
+     function generateData() {
+         var result = [];
+         for(var i = 0; i < 10; ++i) {
+             result[i] = Math.random().toFixed(2);
+         }
+         return result;
+     }
+
+     Chart {
+         id: chart
+         chartType: 'bar'
+         chartData: {
+             return {
+                 labels: [1,2,3,4,5,6,7,8,9,10],
+                 datasets: [{
+                     label: 'One dataset',
+                     xAxisId: 'x-axis-1',
+                     yAxisId: 'y-axis-1',
+                     backgroundColor: 'rgba(255, 192, 192, 0.8)',
+                     borderColor: 'rgba(255,0,0,1)',
+                     borderWidth: 1,
+                     data: myWindow.generateData()
+                 }]
+             }
+         }
+
+         chartOptions: {return {
+                 maintainAspectRatio: false,
+                 responsive: true,
+                 hoverMode: 'nearest',
+                 intersect: true,
+                 title: {
+                     display: true,
+                     text: 'Chart.js Scatter Chart - Multi Axis'
+                 },
+                 scales: {
+                     xAxes: [{
+                         position: 'bottom',
+                         id: 'x-axis-1',
+                         gridLines: {
+                             zeroLineColor: 'rgba(0,0,0,1)'
+                         }
+                     }],
+                     yAxes: [{
+                         display: true,
+                         position: 'left',
+                         id: 'y-axis-1',
+                         ticks: {
+                             min: 0,
+                             max: 1,
+                             stepSize: 0.1
+                         }
+                     }]
+                 }
+             }
+         }
+
+         anchors {
+             fill: parent
+             bottomMargin: 50
+         }
+     }
+     Rectangle {
+         anchors {
+             horizontalCenter: parent.horizontalCenter
+             bottom: parent.bottom
+             topMargin: 5
+             bottomMargin: 5
+         }
+         height: 40
+         width: parent.width * 0.6
+         color: "#eee"
+         border.color: "#999"
+
+         MouseArea {
+             anchors.fill: parent
+             onClicked: {
+                 chart.chartData.datasets[0].data = myWindow.generateData();
+                 chart.animateToNewData();
+             }
+         }
+
+         Text {
+             anchors.horizontalCenter: parent.horizontalCenter
+             anchors.verticalCenter: parent.verticalCenter
+             text: "Randomize data"
+         }
+     }
+ }

main.qml

@@ -1,3 +1,9 @@
+/*!
+ * Elypson's Chart.qml adaptor to Chart.js
+ * (c) 2020 ChartJs2QML contributors (starting with Elypson, Michael A. Voelkel, https://github.com/Elypson)
+ * Released under the MIT License
+ */
+
 import QtQuick 2.0
 import QtQuick.Window 2.0
 import "Chart.bundle.js" as Chart
@@ -17,8 +23,6 @@ Window
 		anchors.fill: parent
 
 		Chart {
-
-
 			chartType: 'scatter'
 			chartData: {
 				return {