react-plolty.js

react-plotlyjs.md

Overview

https://plotly.com/javascript/react/

$ npm i react-plotly.js plotly.js
$ npm i -D @types/react-plotly.js

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

export const Component = () => (
  <Plot
    config={{ staticPlot: true, responsive: true, autosizable: true }}
    style={{ position: 'absolute', top: 60, left: 60 }}
    layout={{
      width: undefined, // 100%
      height: 500,
      margin: { pad: 0, l: 50, r: 50, t: 50, b: 50 },
      xaxis: { tickfont: { size: 18 } },
      yaxis: { tickfont: { size: 18 } },
      legend: { xanchor: 'center', yanchor: 'bottom', orientation: 'h', x: 0.5, y: -0.2, font: { size: 18 } },
    }}
    data={[
      {
        name: 'Data1',
        type: 'bar',
        x: [1, 2, 3],
        y: [2, 5, 3]
      },
      {
        name: 'Data2',
        type: 'scatter',
        mode: 'lines+markers',
        marker: { color: 'red' },
        x: [1, 2, 3],
        y: [2, 6, 3],
      },
    ]}
  />
)