KeyLines Rendering

Contents

• Introduction
• KeyLines and WebGL
• SVGs
• Recommendations
• Limitations and Known Issues

Introduction

KeyLines uses WebGL (Web Graphics Library) by default to render charts.

WebGL is a rendering method that works as an alternative to HTML5 Canvas by delivering fast graphics directly inside an HTML <canvas> element.

It runs on most modern browsers and hardware platforms, including mobile devices, by using the power of GPUs (Graphics Processing Units). Thanks to its performance, WebGL provides smooth, responsive updates to KeyLines visualisations and allows users to analyse large charts and datasets more quickly.

WebGL is developed and maintained by the non-profit Khronos Group and follows web platform security standards. For more details, see Khronos Security.

KeyLines and WebGL

To check if your device meets the minimum requirements for WebGL, run KeyLines.webGLSupport().

WebGL requires hardware acceleration, which is enabled by default in modern browsers. Some browser and platform combinations let you toggle between multiple WebGL renderers.

If WebGL is disabled or unavailable, KeyLines falls back to HTML5 Canvas. To disable WebGL manually, call KeyLines.mode('canvas') before creating a chart.

SVGs

For stability and performance, SVGs are converted to bitmaps when drawn and limited to 256x256px. If you zoom in further, the image will lose sharpness.

For more information about SVG support and recommendations, see Image Formats.

Recommendations

• For optimal performance, use WebGL on a desktop with dedicated graphics cards.
• Keep your graphics card drivers up to date.
• Use devices with at least 4GB of RAM (for example, modern laptops or tablets released after 2018).
• Limit the number of different fonts to improve rendering performance.
• Don't use more than two images at 512x512px resolution, after this they'll be automatically scaled down to 256x256px.

KeyLines can performantly display up to 900 distinct 256x256px images and font icons, limited only by the user's hardware. Using more than this is not recommended as it may affect chart rendering performance.

Limitations and Known Issues

• WebGL does not run when loading KeyLines directly from the file system. Always run it from a web server.
• Windows laptops with AMD switchable graphics may not be supported on Chrome.
• In some virtual machines, WebGL support may be limited depending on GPU passthrough and driver settings.
• On mobile devices, charts may stop drawing or reload after switching tabs. Browsers may also report that WebGL has failed. If that happens, reload the page to continue.
• Sizing and alignment of images and font icons differs slightly between WebGL and Canvas. Use the imageAlignment option to adjust them based on the mode you are using.
• Emojis appear slightly larger in Canvas mode compared to WebGL at the same zoom level.
• Emojis represented textually (for example, with the U+FE0E variation selector) always appear black in WebGL, but match the label font color in Canvas.
• Some languages are not supported by the WebGL renderer. These include, but are not limited to, Bangla/Bengali, Burmese, Gujarati, Hindi, Kannada, Khmer, Lao, Malayalam, Marathi, Nepali, Odia, Punjabi, Sylheti, Tamil, Telugu, Thai, and Urdu.
• Having many instances of KeyLines open in a Microsoft Edge browser may result in the applications crashing and a 'context_lost_webgl' error in the console. If that happens, reduce the number of active tabs and reload the tabs to continue.