React Plotly.js in JavaScript

How to use the Plotly.js React component.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI.Try Plotly Studio now.

Introduction

Usereact-plotly.js to embed D3 charts in yourReact-powered web application. This React component takes the chart type, data, and styling asPlotly 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 asState Management orCustomizing the plotly.js bundle please see theReadMe for react-plotly.js.

Props and Events

More information aboutProps andEvent Handlers can be found in theReadMe for react-plotly.js.

Plotly.js Chart Types and Attributes