ReferenceError: HTMLCanvasElement is not defined

[kdekooter]

Trying to apply this library to code ported from the front end:

const ChartjsNode = require('chartjs-node')

let chart = new ChartjsNode(300, 200)

let result = require('./data.json')

let data = {
  labels: result.map(d => d.date[ 2 ] + '-' + d.date[ 1 ]),
  datasets: [
    {
      label: 'x',
      backgroundColor: 'rgba(255, 99, 132, 0.7)',
      borderColor: 'rgba(255, 99, 132, 0.7)',
      data: result.map(d => d.x)
    },
    {
      label: 'y',
      backgroundColor: 'rgba(54, 162, 235, 0.7)',
      borderColor: 'rgba(54, 162, 235, 0.7)',
      data: result.map(d => d.y)
    },
    {
      label: 'z',
      backgroundColor: 'rgba(255, 206, 86, 0.7)',
      borderColor: 'rgba(255, 206, 86, 0.7)',
      data: result.map(d => d.z)
    }
  ]
}

let options = {
  fill: false,
  legend: {
    position: 'bottom'
  },
  elements: {
    line: {
      tension: 0,
      fill: false
    }
  }
}

chart.drawChart({ type: 'line', data: data, options: options })
  .then(() => {
    chart.writeImageToFile('image/png', './chart.png')
    chart.destroy()
  })
  .catch(error => console.log(error))

This results in ReferenceError: HTMLCanvasElement is not defined.

[sedouard]

Thanks for reporting this @kdekooter. I'm seeing it in the CI runs too. Taking a look at it today.

[sedouard]

Hey @kdekooter looks like you may be having the same issue I saw in our CI. We had a bad build of canvas. Can you check you have correctly installed Cairo on your system? (as referenced in the README of this repo).

[kdekooter]

@sedouard yes Cairo was installed as per the instructions (OS X in my case)

[sedouard]

Hey @kdekooter just ran your sample code taking out data.json since I didn't have it. I don't think the issue depends on that anyways. The HTMLCanvasElement implies that the node bindings to Cairo are not working. I tested this on OSX 10.11.4 with node v5.12 (which is probably not the best version to use).

const ChartjsNode = require('chartjs-node')

let chart = new ChartjsNode(300, 200)


let data = {
  labels: ['Red', 'Green', 'Yello'],
  datasets: [
    {
      label: 'x',
      backgroundColor: 'rgba(255, 99, 132, 0.7)',
      borderColor: 'rgba(255, 99, 132, 0.7)',
      data: [1,2,3,4,4,5]
    },
    {
      label: 'y',
      backgroundColor: 'rgba(54, 162, 235, 0.7)',
      borderColor: 'rgba(54, 162, 235, 0.7)',
      data: [1,2,3,4,4,5]
    },
    {
      label: 'z',
      backgroundColor: 'rgba(255, 206, 86, 0.7)',
      borderColor: 'rgba(255, 206, 86, 0.7)',
      data: [1,2,3,4,4,5]
    }
  ]
}

let options = {
  fill: false,
  legend: {
    position: 'bottom'
  },
  elements: {
    line: {
      tension: 0,
      fill: false
    }
  }
}

chart.drawChart({ type: 'line', data: data, options: options })
  .then(() => {
    chart.writeImageToFile('image/png', './chart.png')
    chart.destroy()
  })
  .catch(error => console.log(error))

Here's the output chart:

Anyways I would check to see if npm install chartjs-node works correctly as this issue seems to be related to your local environment with Cairo and canvas and not with chartjs-node.

[kdekooter]

@sedouard yes, that is what it should look like! npm install chartjs-node works fine.

I reinstalled brew, the cairo stuff, canvas but still no change.

This is my environment: OS X 10.12.1, Node 7.1.0, Cairo 1.14.8.

Do you have any pointers as to how to debug my setup?

[FilipeDominguesGit]

@kdekooter I had the same error. For me it was the chart.js@2.4.0 that seems not to be supported. I just switched to the chart.js@2.3.0 and its working fine now.

Hope it helps you.

[kdekooter]

@FilipeDominguesGit you saved my day! That solved it!

@sedouard is this a bug in chart.js or an incompatibility in chartjs-node?

[sedouard]

Not sure whats different in chart.js@2.40 vs chart.js@2.30. To be honest that's just the version I tested against and set CI up for. I'll change the peerDependencies to use chart.js@2.3.*. So that the npm install indicates an unmet dependency.

Won't have time to see what the deal is with 2.4.0. But I'll open another issue to support it.

[sedouard]

Published an updated version chartjs-node@1.1.1 with the updated peerDependency. Originally I had chart.js as a peerDependency because I wanted to give some flexibility on the version of chart.js you could use with this package :-/.

We'll see if we can figure out what's going on with the newer versions of chart.js.