KeyLines Rendering

About KeyLines

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.

Terms of use

These terms do not alter or supersede any existing agreements between you (or your employer) and us.

By accessing or using any Content you agree to be bound by these Terms of Use. Please review these terms carefully before using the website.

The contents of this website, including but not limited to any text, code samples, API references, schemas, interactive tools, and other materials (collectively, the 'Content'), are made available for informational and internal evaluation purposes only. All intellectual property rights in the Content are reserved. No licence is granted to use the Content for any commercial purpose, or to copy, distribute, modify, reverse-engineer, or incorporate any part of the Content into any product or service, without our prior written consent.

This Content is provided “as is” and “as available,” without any representations, warranties, or guarantees of any kind, whether express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, non-infringement, or accuracy. To the fullest extent permitted by applicable law, we expressly exclude and disclaim all implied warranties, conditions, and other terms that might otherwise be implied.

We disclaim all liability for any loss or damage, whether direct, indirect, incidental, consequential, or otherwise, arising from any reliance placed on the Content or from your use of it, to the fullest extent permitted by applicable law. By continuing to access or use the Content, you acknowledge and agree to these terms.