https://github.com/davidctj/react-plotlyjs-ts
A react-typescript component for Plotly.JS graphs.
https://github.com/davidctj/react-plotlyjs-ts
plotlyjs react react-plotlyjs typescript
Last synced: about 2 months ago
JSON representation
A react-typescript component for Plotly.JS graphs.
- Host: GitHub
- URL: https://github.com/davidctj/react-plotlyjs-ts
- Owner: davidctj
- License: mit
- Created: 2017-09-04T12:29:51.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-02-29T07:45:19.000Z (over 5 years ago)
- Last Synced: 2025-04-12T02:17:56.108Z (about 2 months ago)
- Topics: plotlyjs, react, react-plotlyjs, typescript
- Language: TypeScript
- Homepage:
- Size: 61.5 KB
- Stars: 15
- Watchers: 2
- Forks: 10
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-PlotlyJS-Typescript [](https://badge.fury.io/js/react-plotlyjs-ts)
A react-typescript component for Plotly.JS graphs.
Self-redraw when props changed.
## Usage
```bash
$ npm i -S react react-dom typescript
$ npm i -D @types/plotly.js
$ npm i -S plotly.js react-plotlyjs-ts
```
```typescript
import * as React from 'react';
import PlotlyChart from 'react-plotlyjs-ts';
class App extends React.Component {
public handleClick = (evt: any) => alert('click')
public handleHover = (evt: any) => alert('hover')
public render() {
const data = [
{
marker: {
color: 'rgb(16, 32, 77)'
},
type: 'scatter',
x: [1, 2, 3],
y: [6, 2, 3]
},
{
name: 'bar chart example',
type: 'bar',
x: [1, 2, 3],
y: [6, 2, 3],
}
];
const layout = {
annotations: [
{
text: 'simple annotation',
x: 0,
xref: 'paper',
y: 0,
yref: 'paper'
}
],
title: 'simple example',
xaxis: {
title: 'time'
},
};
return (
);
}
}
export default App;
```
## Documentation
Define PlotlyChart props below:
```typescript
config?: any;
data: any;
layout?: any;
onClick?: (event: plotly.PlotMouseEvent) => void;
onBeforeHover?: (event: plotly.PlotMouseEvent) => void;
onHover?: (event: plotly.PlotMouseEvent) => void;
onUnHover?: (event: plotly.PlotMouseEvent) => void;
onSelected?: (event: plotly.PlotSelectionEvent) => void;
```
* data, layout, config are the same as in the [plotly.js](https://www.npmjs.com/package/plotly.js).
* onClick, onBeforeHover, onHover, onUnHover, onSelected are on event functions.
Use ES6 destructuring to get the points and event.
## Todo
Add testing
## Thanks
Inspired by [React-PlotlyJS](https://github.com/benjeffery/react-plotlyjs), many thanks!