GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing plotly.com — React plotly.js in JavaScript

Introduction

Use react-plotly.js to embed D3 charts in your React-powered web application. This React component takes the chart type, data, and styling as Plotly JSON in its data and layout props, then draws the chart using Plotly.js. See below about how to get started with react-plotly.js.

Installation

$ npm install react-plotly.js plotly.js

Quick Start

The easiest way to use this component is to import and pass data to a plot component:

import React from 'react';
import Plot from 'react-plotly.js';

class App extends React.Component {
  render() {
    return (
      <Plot
        data={[
          {
            x: [1, 2, 3],
            y: [2, 6, 3],
            type: 'scatter',
            mode: 'lines+markers',
            marker: {color: 'red'},
          },
          {type: 'bar', x: [1, 2, 3], y: [2, 5, 3]},
        ]}
        layout={ {width: 320, height: 240, title: {text: 'A Fancy Plot'}} }
      />
    );
  }
}

Advanced Usage

For information on more advanced usage patterns such as State Management or Customizing the plotly.js bundle please see the ReadMe for react-plotly.js.

Props and Events

More information about Props and Event Handlers can be found in the ReadMe for react-plotly.js.

Plotly.js Chart Types and Attributes

Click here for more information about Plotly Chart Types and Attributes.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.