This demo is a version of Time Periods demo and uses Vue version 3.

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

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

Vue Component

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

See also

Tutorial: Vue Tutorial

KeyLines Vue component: Vue Reference

Vue official page: vuejs.org

Key functions used:

• chart.filter
• chart.layout
• timebar.inRange
• Time bar Events
  • 'change'