Title in the JSON file for a Plotly plot cannot be rendered by react-plotly.js library in a React Web App

Question

In my React Web App, I would like to use "react-plotly.js" library to render a Plotly plot from the JSON file exported from Python.

An example of the JSON file is:

   {
      "data": [{
        "values": [19, 26, 55],
        "labels": ["Residential", "Non-Residential", "Utility"],
        "type": "pie"
      }],
      "layout": {
        "height": 400,
        "width": 500,
        "title": "Pie chart"
      }
   }

The code snippet for rendering the plot component is:

           import Plot from 'react-plotly.js';
           ... ... ... ...
           <div style={{ width: "100%" }}>
                <Plot
                  data={plotData.data}
                  layout={{
                    ...plotData.layout
                  }}
                  config={{ responsive: true }}
                  useResizeHandler={true}
                  style={{ width: "100%", height: "100%" }}
                />
            </div>

When I ran the React web app, the title of the plot was not rendered.

I am with "react-plotly.js": "^2.6.0".

Please help.

Naren Murali · Accepted Answer · 2025-04-30 14:21:47Z

0

Seems like a bug to me, you should raise the issue on their react-plotly.js - Github Issues page.

As a temporary workaround, we can specify the title property as an object, with the title name, set on the text property.

  title: {
    text: 'Pie chart',
  },
  height: 400,
  width: 500,
},

Full Code:

import React, { useState } from 'react';
import './App.css';
import Plot from 'react-plotly.js';

function App() {
  const [data, setData] = useState({
    data: [
      {
        values: [19, 26, 55],
        labels: ['Residential', 'Non-Residential', 'Utility'],
        type: 'pie',
      },
    ],
    layout: {
      margin: {
        t: -100,
      },
      title: {
        text: 'Pie chart'
      },
      height: 400,
      width: 500,
    },
  });
  return (
    <div>
      <Plot data={data.data} layout={data.layout} />
    </div>
  );
}

export default App;

Stackblitz Demo

edited Apr 30 at 14:21

answered Apr 30 at 12:23

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Title in the JSON file for a Plotly plot cannot be rendered by react-plotly.js library in a React Web App

1 Answer 1

Full Code:

Stackblitz Demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Full Code:

Comments

Your Answer

Sign up or log in

Post as a guest

Related