{"repo":"plotly/react-plotly.js","free":true,"listed":false,"github":"https://github.com/plotly/react-plotly.js","clone":"git clone https://github.com/plotly/react-plotly.js.git","description":"A plotly.js React component from Plotly 📈","language":"JavaScript","stars":1091,"topics":["react","plotly","data-visualization","d3","charting-library","bioinformatics","fintech"],"license":"MIT","category":"analytics","readme_excerpt":"react-plotly.js A plotly.js React component from Plotly. --- Contents - Installation - Quick start - State management - Refreshing the Plot - API - Basic props - Event handler props - Examples - Responsive plot - Event handlers - TypeScript - Grabbing the graph div via ref - Customizing the plotly.js bundle - Loading from a tag - Development Installation Quick start The easiest way to use this component is to import and pass data to a plot component: You should see a plot like this: For a full description of Plotly chart types and attributes see the following resources: - Plotly JavaScript API documentation - Full plotly.js attribute listing State management This is a \"dumb\" component that doesn't merge its internal state with any updates. This means that if a user interacts with the plot, by zooming or panning for example, any subsequent re-renders will lose this information unless it is captured and upstreamed via the onUpdate callback prop. Here is a simple example of how to capture and store state in a parent object: Refreshing the Plot This component will refresh the plot via Plotly.react if any of the following are true: - The revision prop is defined and has changed, OR; - One of data , layout or config has changed identity as checked via a shallow === , OR; - The number of elements in frames has changed Furthermore, when called, Plotly.react will only refresh the data being plotted if the identity of the data arrays (e.g. x , y , marker.color etc) has changed, or if l","default_branch":null,"files":null,"tree":[],"storefront":"/r/plotly","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/plotly/react-plotly.js/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}