Skip to content

Instantly share code, notes, and snippets.

@tony

tony/Chart.tsx

Last active Jan 2, 2021
Embed
What would you like to do?
plotly.js react wrapper component (TypeScript, Functional Component, react-plotly.js alternative)
import React from "react";
import Plotly from "plotly.js/dist/plotly";
export interface ChartProps {
data?: Plotly.Data[];
layout: Partial<Plotly.Layout>;
frames?: Plotly.Frame[];
config?: Partial<Plotly.Config>;
// react-specific
style?: React.CSSProperties;
}
export const Chart: React.FC<ChartProps> = ({
style = {},
data,
...props
}) => {
const ref = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
Plotly.react(ref.current, { data, ...props });
}, [props, data]);
return <div ref={ref} style={style} />;
};
declare module "plotly.js/dist/plotly" {
export { Plotly as default } from "plotly.js";
}
@tony

This comment has been minimized.

Copy link
Owner Author

@tony tony commented Jan 2, 2021

I made an issue for this at plotly/react-plotly.js#226

No need for resizeHandler as that's already in plotly.js as of plotly/plotly.js#2974 / Sep 7, 2018 / v1.41.0 / plotly/plotly.js@cfc720b by config = {{ responsive: true }}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment