react-plotlyjs-ts's Introduction

React-PlotlyJS-Typescript

A react-typescript component for Plotly.JS graphs.

Self-redraw when props changed.

Usage

$ npm install react react-dom typescript plotly.js
$ npm install react-plotlyjs-ts

import PlotlyChart from 'react-plotlyjs-ts';

...
render(){    
     const data = [
          {
            type: 'scatter',  
            x: [1, 2, 3],     
            y: [6, 2, 3],     
            marker: {       
              color: 'rgb(16, 32, 77)'
            }
          },
          {
            type: 'bar',   
            x: [1, 2, 3],  
            y: [6, 2, 3],  
            name: 'bar chart example' 
          }
        ];
        const layout = {           
          title: 'simple example', 
          xaxis: {                 
            title: 'time'         
          },
          annotations: [           
            {
              text: 'simple annotation',    
              x: 0,                         
              xref: 'paper',                
              y: 0,                         
              yref: 'paper'                 
            }
          ]
        };        
    return (
        <PlotlyChart data={data}
                     layout={layout}
                     onClick={({points, event}) => console.log(points, event)} />
    )
}

Documentation

Define PlotlyChart props below:

   config?: any;
   data: any[];
   layout?: any;
   onClick?: (data: { points: any, event: any }) => any;
   onBeforeHover?: (data: { points: any, event: any }) => any;
   onHover?: (data: { points: any, event: any }) => any;
   onUnHover?: (data: { points: any, event: any }) => any;
   onSelected?: (data: { points: any, event: any }) => any;

data, layout, config are the same as in the plotly.js.
onClick, onBeforeHover, onHover, onUnHover, onSelected are on event functions. Use ES6 destructuring to get the points and event.