React Reference

Introduction

KeyLines is compatible with many JavaScript frameworks, including React. You can write your own React component, or you can use the example available in the react folder when you download KeyLines.

As the majority of React applications now use ES6/JSX, we use Babel to transpile the ES6 and JSX into well supported JavaScript. You can use our component 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 React 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 a React Tutorial as well as a React Integration demo.

Defining additional children

To define additional children to be rendered as siblings of the KeyLines chart, use the this.props.children property.

This is useful for overlay components such as tooltips or popovers (overlay components designed to show pop-ups over the chart):

class Wrapper extends React.Component {
  render () {
    return (
      <div>
        {/* Popup is an overlay component designed to show popups on the chart */}
        <Chart data={myData} ><Popup /></Chart>
      </div>
    );
  }
};

Reference

The React component allows you to show a chart or time bar by describing their state with a series of objects in the render function.

State can mean a number of things including the data to render, the styling to apply, the events to respond to, the items to select in the chart or time bar and others. This state is passed to the component via props explained below:

import { Chart, Timebar } from 'keylines/react';

<Chart
  animateOnLoad={animateOnLoad}
  containerClassName={containerClassName}
  data={data}
  options={options}
  ready={ready}
  selection={selection}
  style={style}
  click={clickHandler}    // similarly for any other chart event
/>

<Timebar
  animateOnLoad={animateOnLoad}
  containerClassName={containerClassName}
  data={data}
  options={options}
  ready={ready}
  selection={selection}
  style={style}
  click={clickHandler}    // similarly for any other time bar event
/>