Graph can be used to render any plotly.js-powered data visualization. You can define callbacks based on user interaction with Graphs such as hovering, clicking or selecting Properties: • id (string) - The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app. • responsive (value equal to: 'true', 'false', 'auto'; default auto) - If True, the Plotly.js plot will be fully responsive to window resize and parent element resize event. This is achieved by overriding `config.responsive` to True, `figure.layout.autosize` to True and unsetting `figure.layout.height` and `figure.layout.width`. If False, the Plotly.js plot not be responsive to window resize and parent element resize event. This is achieved by overriding `config.responsive` to False and `figure.layout.autosize` to False. If 'auto' (default), the Graph will determine if the Plotly.js plot can be made fully responsive (True) or not (False) based on the values in `config.responsive`, `figure.layout.autosize`, `figure.layout.height`, `figure.layout.width`. This is the legacy behavior of the Graph component. Needs to be combined with appropriate dimension / styling through the `style` prop to fully take effect. • clickData (record; default null) - Data from latest click event. Read-only. • clickAnnotationData (record; default null) - Data from latest click annotation event. Read-only. • hoverData (record; default null) - Data from latest hover event. Read-only. • clear_on_unhover (boolean; default false) - If True, `clear_on_unhover` will clear the `hoverData` property when the user "unhovers" from a point. If False, then the `hoverData` property will be equal to the data from the last point that was hovered over. • selectedData (record; default null) - Data from latest select event. Read-only. • relayoutData (record; default null) - Data from latest relayout event which occurs when the user zooms or pans on the plot or other layout-level edits. Has the form `{: }` describing the changes made. Read-only. • extendData (list | record; default null) - Data that should be appended to existing traces. Has the form `[updateData, traceIndices, maxPoints]`, where `updateData` is an object containing the data to extend, `traceIndices` (optional) is an array of trace indices that should be extended, and `maxPoints` (optional) is either an integer defining the maximum number of points allowed or an object with key:value pairs matching `updateData` Reference the Plotly.extendTraces API for full usage: https://plotly.com/javascript/plotlyjs-function-reference/#plotlyextendtraces • prependData (list | record; default null) - Data that should be prepended to existing traces. Has the form `[updateData, traceIndices, maxPoints]`, where `updateData` is an object containing the data to prepend, `traceIndices` (optional) is an array of trace indices that should be prepended, and `maxPoints` (optional) is either an integer defining the maximum number of points allowed or an object with key:value pairs matching `updateData` Reference the Plotly.prependTraces API for full usage: https://plotly.com/javascript/plotlyjs-function-reference/#plotlyprependtraces • restyleData (list; default null) - Data from latest restyle event which occurs when the user toggles a legend item, changes parcoords selections, or other trace-level edits. Has the form `[edits, indices]`, where `edits` is an object `{: }` describing the changes made, and `indices` is an array of trace indices that were edited. Read-only. • figure (record with the fields: 'data: list with values of type: record (optional)', 'layout: record (optional)', 'frames: list with values of type: record (optional)'; default { data: [], layout: {}, frames: [], }) - Plotly `figure` object. See schema: https://plotly.com/javascript/reference `config` is set separately by the `config` property • style (record) - Generic style overrides on the plot div • className (string) - className of the parent div • animate (boolean; default false) - Beta: If true, animate between updates using plotly.js's `animate` function • animation_options (record; default { frame: { redraw: false, }, transition: { duration: 750, ease: 'cubic-in-out', }, }) - Beta: Object containing animation settings. Only applies if `animate` is `true` • config (record with the fields: 'staticPlot: boolean (optional)', 'plotlyServerURL: string (optional)', 'editable: boolean (optional)', 'edits: record with the fields: 'annotationPosition: boolean (optional)', 'annotationTail: boolean (optional)', 'annotationText: boolean (optional)', 'axisTitleText: boolean (optional)', 'colorbarPosition: boolean (optional)', 'colorbarTitleText: boolean (optional)', 'legendPosition: boolean (optional)', 'legendText: boolean (optional)', 'shapePosition: boolean (optional)', 'titleText: boolean (optional)' (optional)', 'autosizable: boolean (optional)', 'responsive: boolean (optional)', 'queueLength: number (optional)', 'fillFrame: boolean (optional)', 'frameMargins: number (optional)', 'scrollZoom: boolean (optional)', 'doubleClick: value equal to: 'false', 'reset', 'autosize', 'reset+autosize' (optional)', 'doubleClickDelay: number (optional)', 'showTips: boolean (optional)', 'showAxisDragHandles: boolean (optional)', 'showAxisRangeEntryBoxes: boolean (optional)', 'showLink: boolean (optional)', 'sendData: boolean (optional)', 'linkText: string (optional)', 'displayModeBar: value equal to: 'true', 'false', 'hover' (optional)', 'showSendToCloud: boolean (optional)', 'showEditInChartStudio: boolean (optional)', 'modeBarButtonsToRemove: list (optional)', 'modeBarButtonsToAdd: list (optional)', 'modeBarButtons: boolean | number | string | record | list (optional)', 'toImageButtonOptions: record with the fields: 'format: value equal to: 'jpeg', 'png', 'webp', 'svg' (optional)', 'filename: string (optional)', 'width: number (optional)', 'height: number (optional)', 'scale: number (optional)' (optional)', 'displaylogo: boolean (optional)', 'watermark: boolean (optional)', 'plotGlPixelRatio: number (optional)', 'topojsonURL: string (optional)', 'mapboxAccessToken: boolean | number | string | record | list (optional)', 'locale: string (optional)', 'locales: record (optional)'; default {}) - Plotly.js config options. See https://plotly.com/javascript/configuration-options/ for more info. • loading_state (record with the fields: 'is_loading: boolean (optional)', 'prop_name: string (optional)', 'component_name: string (optional)') - Object that holds the loading state object coming from dash-renderer