Dynamic update data for chart in canvas about chart-js-fabric HOT 8 CLOSED

public initialize(options?: fabric.IChartConfiguration) {
	super.initialize(options);
	this.__createChart();
	this.__bindChartEvents();

	this.on('scaling', debounce(this.__setChartSize.bind(this), 5));
+	this.on('scaled', _ => {
+		const config = {
+			width: Math.ceil(this.width * this.scaleX),
+			height: Math.ceil(this.height * this.scaleY),
+			scaleX: 1.0,
+			scaleY: 1.0,
+		};
+		Object.keys(config).forEach(k => this.set.apply(this, [k, config[k]]), this);
+		this.__setChartSize.bind(this);
+	});

	return this
}

from chart-js-fabric.

Hi! Glad you like the package. Can you simply try to add a currentChart.set('dirty', true) after setting the data? The package does not force a re-render after updating the data unless you specifically request it.

from chart-js-fabric.

Hi @yassipad,
Thank you for your tip 🤩 It can render new data smoothly now 👍🏻
By the way, I also have faced a problem with chart scaling.

When I try to scale the chart, it sometimes renders a blank object. I think it relates to the responsive and maintainAspectRatio options, I have to set these options to true but not working properly. Do you have any idea? 😄

from chart-js-fabric.

This is a bit odd but unfortunately i think it's probably related to the number of rendering requests when scaling... Is cache disabled ?

from chart-js-fabric.

I have set the objectCaching: true when creating the chart but still face the same problem.

from chart-js-fabric.

Thank you @QJesus, it works amazingly! 😄

from chart-js-fabric.

@QJesus @pnbao Hi, Can you tell me what exactly the above code by @QJesus does? I am facing the same blank object issue on scaling.

from chart-js-fabric.

after scaled, resize width, height and scaleX/Y equals 1, chat cannot be scaled

can change Object.keys(config).forEach(k => this.set.apply(this, [k, config[k]]), this); to this.set(config)

from chart-js-fabric.