Skip to main content
Participant
October 6, 2020
Answered

Chart added using Chart.JS appears and disappears (HTML5 Canvas)

  • October 6, 2020
  • 1 reply
  • 3460 views

Hi all, I've tried to add a chart using Chart.JS in my HTML5 Canvas project. The chart does appear for 1-2 seconds but then disappears again. It becomes visible again when you hover the mouse over the area where the chart should be as you can see in the below picture. 

The chart.js library was loaded via a CDN link under global include and the code that I used for creating the chart on the frame is:

var _this = this;
this.stop();

MyContainer = new createjs.Container(); 
stage.addChild(MyContainer);

const chartCanvas = document.getElementById("canvas");
const canvasContext = chartCanvas.getContext("2d");
const chartBitmap = new createjs.Bitmap(chartCanvas);

var myChart = new Chart(canvasContext, {
  type: 'bar',
  data: {
    labels: ["2015-01", "2015-02", "2015-03", "2015-04", "2015-05", "2015-06", "2015-07", "2015-08", "2015-09", "2015-10", "2015-11", "2015-12"],
    datasets: [{
      label: '# of Tomatoes',
      data: [12, 19, 3, 5, 2, 3, 20, 3, 5, 6, 2, 1],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)',
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    responsive: false,
    scales: {
      xAxes: [{
        ticks: {
          maxRotation: 90,
          minRotation: 80
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

MyContainer.addChild(chartBitmap);
MyContainer.update();

Any idea what could cause this and how to resolve this issue? Any suggestions or help would be great ly appreciated!

Thanks!

This topic has been closed for replies.
Correct answer ClayUUID

Any attempt to use a third-party canvas library with Animate is going to be an advanced technical challenge, because CreateJS takes absolute control over the canvas.

 

Off the top of my head, you might try creating a placeholder movieclip, set it to cache as bitmap, retrieve the cached canvas, then use that canvas as the charting library's render target. That could work.

1 reply

ClayUUIDCorrect answer
Legend
October 6, 2020

Any attempt to use a third-party canvas library with Animate is going to be an advanced technical challenge, because CreateJS takes absolute control over the canvas.

 

Off the top of my head, you might try creating a placeholder movieclip, set it to cache as bitmap, retrieve the cached canvas, then use that canvas as the charting library's render target. That could work.

Participant
October 10, 2020

Thanks ClayUID, appreciate the answer and insight!

My expereince with HTML5 Canvas and CreateJS is still a bit limited so I will have to take some time to see if I can make that work!

Participant
September 3, 2021

Hi Frans van Eck,

I'm encoutering the same issue with chartjs and Animate, would you share the solution you found to solve the problem?

Thank you in advance