Package: trame-plotly
trame-plotly extend tramewidgetswith components that can interface with Plotly to display their charts.Plotly integration in trame allow you to create rich visualization by leveraging theirPythonorJavaScriptinterface.
The JavaScript version is exposed viaVue.plotlywithin trame.widgets.plotly.Plotly class definition.This package is not supposed to be used by itself but rather should come as a dependency oftrame.
For any specificity, please refer tothe trame documentation.Installingtrame-plotly can be installed withpip:pipinstall--upgradetrame-plotlyUsageTheTrame Tutorialis the place to go to learn how to use the library and start building your own application.TheAPI Referencedocumentation provides API-level documentation.The Plotly component relies on the server for generating the chart definition. This can be achieved by hand or by simply using the Python version of Plotly.How to use it?Using the Python libraryimportplotly.graph_objectsasgofromtrame.widgetsimportplotlyfig=go.Figure(data=go.Contour(z=[[10,10.625,12.5,15.625,20],[5.625,6.25,8.125,11.25,15.625],[2.5,3.125,5.0,8.125,12.5],[0.625,1.25,3.125,6.25,10.625],[0,0.625,2.5,5.625,10],]))fig2=go.Figure(data=go.Contour(z=[[5.625,6.25,8.125,11.25,15.625],[2.5,3.125,5.0,8.125,12.5],[10,10.625,12.5,15.625,20],[0.625,1.25,3.125,6.25,10.625],[0,0.625,2.5,5.625,10],]))widget=plotly.Figure(fig)widget.update(fig2)But if you are feeling more adventurous you can use the component API directly by building the data yourself as well.fromtrame.widgetsimportplotly# https://plotly.com/javascript/reference/plotly_data=[{"x":[1,2,3,4],"y":[10,15,13,17],"type":"scatter",}]# https://plotly.com/javascript/reference/layout/plotly_layout={"title":"My graph",}# https://plotly.com/javascript/configuration-options/plotly_options={"scroll_zoom":True,"editable":True,"static_plot":True,"to_image_options":{"format":"svg",# one of png, svg, jpeg, webp"filename":"custom_image","height":500,"width":700,"scale":1# Multiply title/legend/axis/canvas sizes by this factor},"display_mode_bar":True,"mode_bar_buttons_to_remove":["zoom2d","pan2d","select2d","lasso2d","zoomIn2d","zoomOut2d","autoScale2d","resetScale2d",# 2D"zoom3d","pan3d","orbitRotation","tableRotation","handleDrag3d","resetCameraDefault3d","resetCameraLastSave3d","hoverClosest3d",# 3D"hoverClosestCartesian","hoverCompareCartesian",# Cartesian"zoomInGeo","zoomOutGeo","resetGeo","hoverClosestGeo",# Geo"hoverClosestGl2d","hoverClosestPie","toggleHover","resetViews","toImage","sendDataToCloud","toggleSpikelines","resetViewMapbox",# Other],"mode_bar_buttons_to_add":[{"name":'color toggler',"icon":icon1,# https://plotly.com/javascript/configuration-options/#add-buttons-to-modebar"click":"...",},],"locale":"fr","display_logo":False,"responsive":True,"double_click_delay":1000,}# Hand made chartchart=plotly.Figure(data=("chart_data",plotly_data),layout=("chart_layout",plotly_layout),**plotly_options,)TypeValuespropertiesdata, layout, display_mode_bar, scroll_zoom, editable, static_plot, to_image_options, mode_bar_buttons_to_remove, mode_bar_buttons_to_add, locale, display_logo, responsive, double_click_delayeventsafter_export, after_plot, animated, animating_frame, animation_interrupted, auto_size, before_export, button_clicked, click, click_annotation, deselect, double_click, framework, hover, legend_click, legend_double_click, relayout, restyle, redraw, selected, selecting, slider_change, slider_end, slider_start, transitioning, transition_interrupted, unhoverLicensetrame-plotly is made available under the MIT License. For more details, seeLICENSEThis license has been chosen to match the one use byPlotlyandvue-plotlywhich are instrumental for making that library possible.CommunityTrame|Discussions|Issues|RoadMap|Contact UsEnjoying trame?Share your experiencewith a testimonialorwith a brand approval.