This demo is a version of Time Periods demo and uses React version 16.

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

• Declare multiple functional components
• Add font icons and tooltips
• Set options on the chart
• Use chart events to control the tooltip's state
• Listen for the change events on time bar and capture them on the controller to filter the chart

React Component

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

See also

Tutorial: React Tutorial

KeyLines React component: React Reference

React official page: reactjs.org

Key functions used:

• chart.filter
• chart.layout
• chart.getItem
• chart.selection
• chart.setProperties
• chart.graph().neighbours
• Chart Events
  • 'selection-change'
  • 'hover'
  • 'drag-move'
• timebar.inRange
• Time bar Events
  • 'change'