Skip to content

Instantly share code, notes, and snippets.

@TorsteinHonsi
Last active March 25, 2021 06:26
Show Gist options
  • Save TorsteinHonsi/e8a1e6971608523eb8dd to your computer and use it in GitHub Desktop.
Save TorsteinHonsi/e8a1e6971608523eb8dd to your computer and use it in GitHub Desktop.
// This gist is deprecated, doesn't work with newer versions of JSDom.
// Instead, use https://www.npmjs.com/package/highcharts-jsdom
@andreif
Copy link

andreif commented Feb 19, 2016

@TorsteinHonsi hi, what versions did you use? It does not render well for me, and I wonder if it's dependency-related.

@andreif
Copy link

andreif commented Feb 19, 2016

Fixed with:

chart: {
    forExport: true,
    ...
}

@andreif
Copy link

andreif commented Feb 19, 2016

Another issue is that innerHTML of #container contains <svg> wrapped with <div class="highcharts-container">, so in order to get clean SVG one needs to add .childNodes[0]:

var svg = win.document.getElementById('container').childNodes[0].innerHTML;

@DunhamGitHub
Copy link

Splendid, unfortunately it does create errors with "treemaps".

/opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:8
(function(D,aa){typeof module==="object"&&module.exports?module.exports=D.document?aa(D):aa:D.Highcharts=aa(D)})(typeof window!=="undefined"?window:this,function(D){function aa(a,b){var c="Highcharts error #"+a+": www.highcharts.com/errors/"+a;if(b)throw Error(c);D.console&&console.log(c)}function pb(a,b,c){this.options=b;this.elem=a;this.prop=c}function E(){var a,b=arguments,c,d={},e=function(a,b){var c,d;typeof a!=="object"&&(a={});for(d in b)b.hasOwnProperty(d)&&(c=b[d],a[d]=c&&typeof c==="object"&&
                                                                                                                                                                                                                                                         ^

Error: Highcharts error #17: www.highcharts.com/errors/17
    at Error (native)
    at aa (/opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:8:256)
    at Object.gb.initSeries (/opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:214:242)
    at /opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:236:107
    at Array.forEach (native)
    at p (/opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:25:392)
    at Object.gb.firstRender (/opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:236:78)
    at Object.gb.init (/opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:214:135)
    at Object.gb.getArgs (/opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:213:57)
    at Object.x.Chart (/opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:212:378)

The only thing I changed from your code above is this part:

// Generate the chart into the container
Highcharts.chart('container', {
    chart: {
        type: 'treemap',
        layoutAlgorithm: 'squarified',
        width: 600,
        height: 400
    },
    series: [{
        type: 'treemap',
        layoutAlgorithm: 'squarified',
        data: [{
            name: 'A',
            value: 6,
            colorValue: 1
        }, {
            name: 'B',
            value: 6,
            colorValue: 2
        }, {
            name: 'C',
            value: 4,
            colorValue: 3
        }, {
            name: 'D',
            value: 3,
            colorValue: 4
        }, {
            name: 'E',
            value: 2,
            colorValue: 5
        }, {
            name: 'F',
            value: 2,
            colorValue: 6
        }, {
            name: 'G',
            value: 1,
            colorValue: 7
        }]
    }]
});

@graingert
Copy link

@TorsteinHonsi can you please license this explicitly (eg MIT)

@graingert
Copy link

@jb3-2
Copy link

jb3-2 commented Oct 2, 2016

Does not seem to work with highcharts 5.0, thus usenpm install [email protected].

@jb3-2
Copy link

jb3-2 commented Oct 3, 2016

@silvangithub I added the following line in order to add highcharts-more:
var Highcharts_data = require('highcharts/modules/data')(Highcharts);

@pinturic
Copy link

pinturic commented Apr 4, 2017

It has been working very well for ages but now it seams HIghcharts 5 has broken it; did someone find a solution?

@pinturic
Copy link

pinturic commented Apr 4, 2017

it seams "ownerSVGElement" is missing

@pinturic
Copy link

pinturic commented Apr 4, 2017

for me adding the ownerSVGElement property made the trick for highcharts 5.0.0:

unction findAncestor(el, nodeName) {
  while ((el = el.parentElement) && el.nodeName !== nodeName);
  return el;
}

document.createElementNS = function (ns, tagName) {

  ...

  Object.defineProperty(elem, 'ownerSVGElement', {
    get() { return findAncestor(elem, 'SVG'); },
    enumerable: true,
    configurable: true
  });

  ...

@sorb999
Copy link

sorb999 commented Dec 20, 2018

Is it also applicable for stock chart?? I am trying to create stock chart using jsdom but not able to get clear image.

@TorsteinHonsi
Copy link
Author

Hi, I have now deprecated this gist (didn't work with latest jsdom) and created an npm package instead. See https://www.npmjs.com/package/highcharts-jsdom.

I was able to create a stock chart using the following config:

hc({
	infile: 'examples/column.json',
	outfile: 'chart.svg',

	// Constructor, defaults to 'chart'
	constr: 'stockChart',

	// Module files etc
	extensions: [
		'modules/stock'
	]
}).then((result) => {
	console.log(result);
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment