All
API
Docs
Demos
Blogs
Webinars

We recommend using this page together with Using KeyLines with Angular.

Introduction

KeyLines is compatible with many JavaScript frameworks, including Angular. You can write your own Angular component, or you can use the example which is available in angular‑keylines.js when you download KeyLines.

Our component is written in TypeScript, and can be used with modern bundlers such as Webpack or Vite.

Our component is up to date with the latest KeyLines API and regularly tested against the most recent Angular version, so we recommend using the latest version of the component for best performance and compatibility.

To help you get started, we've put together an Angular Tutorial as well as an Angular Integration demo.

Our component does not use Angular standalone components. To use them in this application, complete the tutorial and then use Angular's migration guide.

Reference

This section explains the kl-components and kl-component components found in angular‑keylines.ts and lists all the optional properties that are available in the wrapper to specify the various elements of the KeyLines chart.

kl-component

kl-component is an Angular component that contains a KeyLines chart or timebar.

<kl-component
  id='string'
  klContainerClass='string'
  klEvents='function'
  klReady='function'
  klOptions='object'
  klType='string'
>
</kl-component>
PropertyTypeDescription
idstringThe id which will be assigned to the component's canvas element.
klContainerClassstringThe name of the CSS class to be assigned to the container div of the KeyLines component.
klEventsfunctionAttaches all event handling code provided for the Angular component. Uses the following object format:
{
  name: //the name of the event (e.g: click),
  args: //an array of the event's arguments,
  preventDefault: //true|false: override the default behaviour,
}

See how this works in the Step 7 of Using KeyLines with Angular. See available events in the Chart Events and Time Bar Events APIs.

klReadyfunctionA function name to callback when the KeyLines component is ready to use. The argument passed in will be the component set up as specified.
klOptionsobjectOverrides the default options of your component's APIs once the component is created. See the available Chart options and Time Bar options APIs.
klTypestringThe type of KeyLines component: either 'chart' or 'timebar'. Defaults to 'chart'.

kl-components

kl-components is a wrapper required around kl-component and any other child KeyLines components. 

<kl-components
  klImagesPath='string'
  klReady='function'>

  <!-- <kl-component> wrapped here -->

</kl-components>
PropertyTypeDescription
klImagesPathstringThe path to image resources. For more information, see KeyLines.paths().
klReadyfunctionA function called when all the child KeyLines components are ready to use. This in an easy way to get access to your component's API, passed as an argument of the function.