This demo is a version of Time Periods demo and uses Angular version 12.

This demo shows how to use the KeyLines Angular component to:

• Declare multiple components - KeyLines wraps chart and time bar elements with kl-components
• Add font icons and tooltips
• Set options on the chart
• Listen for change events on the time bar and capture them on the controller to filter the chart

Angular Component

We've written the source code and chart component in ES6 and TypeScript. We've also bundled the demo, chart component and Angular into a single file using Webpack, and transpiled the code to JavaScript using Babel.

See also

Tutorial: Angular Tutorial

KeyLines Angular component: Angular Reference

Angular official page: angular.io

Key functions used:

• chart.filter
• chart.layout
• timebar.inRange
• Time Bar events
  • 'change'