Search code examples
javascriptcanvasboosthighcharts

Is it possible to use boost-canvas without enable WebGL in highcharts (current version 9.0.1)?

since highcharts boost module forced line width = 1px limitation, I want to use boost-canvas as default with disable WebGL.

I found some discussions:

I have tried window.WebGLRenderingContext = undefined, but give me an error:

TypeError: h.eachAsync is not a function
renderCanvas boost.src.js:2953
a boost.src.js:3374
b highcharts.src.js:2582
renderSeries highcharts.src.js:30838
renderSeries highcharts.src.js:30833
render highcharts.src.js:30985
firstRender highcharts.src.js:31201
init highcharts.src.js:29470
e highcharts.src.js:1384
init highcharts.src.js:29390
getArgs highcharts.src.js:29377
f highcharts.src.js:29371
C stock.src.js:10157

Is there any tutorial to force boost-canvas as default for highcharts with better line width ?

Thanks to @ppotaczek, it works. But the tooltip give another error:

Uncaught TypeError: a is undefined
    applyInactiveState highcharts.src.js:24615
    applyInactiveState highcharts.src.js:24611
    runPointActions highcharts.src.js:25805
    onContainerMouseMove highcharts.src.js:25447
    setDOMEvents highcharts.src.js:25958
    setDOMEvents highcharts.src.js:26526
    init highcharts.src.js:25279
    init highcharts.src.js:26469
    f highcharts.src.js:24604
    f highcharts.src.js:26425
    firstRender highcharts.src.js:31201
    init highcharts.src.js:29470
    e highcharts.src.js:1384
    init highcharts.src.js:29390
    getArgs highcharts.src.js:29377
    f highcharts.src.js:29371
    C stock.src.js:10157

Would you please help me with it?

Solution

  • There is a wrong reference to eachAsync function in boost-canvas module - probably bug in Highcharts. If you add the below plugin, which store a reference to the function in Highcharts namespace, the module will be working correctly.

    (function(H) {
    H.eachAsync = function(arr, fn, finalFunc, chunkSize, i, noTimeout) {
        i = i || 0;
        chunkSize = chunkSize || 30000;

        var threshold = i + chunkSize,
            proceed = true;

        while (proceed && i < threshold && i < arr.length) {
            proceed = fn(arr[i], i);
            ++i;
        }

        if (proceed) {
            if (i < arr.length) {
                if (noTimeout) {
                    H.eachAsync(arr, fn, finalFunc, chunkSize, i, noTimeout);
                } else if (window.requestAnimationFrame) {
                    // If available, do requestAnimationFrame - shaves off a few ms
                    window.requestAnimationFrame(function() {
                        H.eachAsync(arr, fn, finalFunc, chunkSize, i);
                    });
                } else {
                    setTimeout(function() {
                        H.eachAsync(arr, fn, finalFunc, chunkSize, i);
                    });
                }

            } else if (finalFunc) {
                finalFunc();
            }
        }
    };
})(Highcharts)

    Live demo: http://jsfiddle.net/BlackLabel/qrsk4nep/

    Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts