Configure Plotly JavaScript charts in Dashboards (Beta)

The Plotly JavaScript chart widget is a beta Dashboard widget that lets you build custom Plotly charts from Insights data, static files, CSV/XLSX data, or Databricks data. Use the standard settings panel for common chart setup, and use the Advanced Editor when you need direct control over Plotly data, layout, or config options.

Plotly chart widget settings panel

Before you begin

You must have permission to edit the Dashboard.
You need access to the data source, channel, file, or Databricks dataset that the chart will use.
This widget is in beta. Chart behavior may change as the widget is updated.
The advanced editor expects valid JSON. Invalid JSON can prevent the chart from rendering correctly.

Build a chart with the settings panel

Open the Dashboard that contains the Plotly chart widget, or add the widget to a Dashboard.
Open the widget settings.
Under Build your chart, select the chart setup that best matches the chart you want to create.
In Basic Settings, select a Chart Type.
If you are creating a 3D chart, select the 3d Sub type.
Select the Index Type. For time-series charts, use Time.
Click Add Trace to add each data series you want to plot.
For each trace, choose the data source type:
- Channel: use an Insights channel from an asset or data source.
- Static / CSV / XLSX: use static values or uploaded tabular data.
- Databricks: use data from a Databricks source.
Select the Y Axis data source. The Y axis is required.
Select the X Axis data source if the chart needs a specific X value. Leave X empty to use time or depth, depending on the widget setup.
Review the chart preview and save the Dashboard when the chart looks correct.

Use the Advanced Editor

Click Advanced Editor when the settings panel does not expose a Plotly option you need. The Advanced Plotly Editor opens with three tabs: Traces (data), Layout, and Config.

Advanced Plotly Editor with Traces data JSON

Advanced editor tabs

Traces (data): controls what the chart draws. This tab maps to Plotly's data array. Use it to adjust trace names, trace types, colors, lines, markers, fills, and other trace-level options.
Layout: controls how the chart is arranged and styled. This tab maps to Plotly's layout object. Use it for titles, axes, legends, margins, gridlines, hover labels, backgrounds, and range sliders.
Config: controls chart interaction behavior. This tab maps to Plotly's config object. Use it for options such as responsiveness, mode bar visibility, scroll zoom, double-click behavior, and the Plotly logo.

Recommended editing workflow

Configure as much of the chart as possible in the settings panel first.
Open Advanced Editor.
Choose one tab to edit.
Make a small change.
Confirm the JSON is still valid.
Click Apply.
Review the chart.
Save the Dashboard after the chart renders correctly.

Edit trace display options

In Traces (data), each trace appears as an object in a JSON array. You can edit common Plotly trace fields such as name, type, mode, marker, line, and opacity.

For example, to rename a trace, find the trace object and update the name value:

"name": "Bit Position"

To change a line or marker color, update the color values inside the existing trace object:

"marker": {
  "color": "#2ad4c4"
},
"line": {
  "color": "#2ad4c4"
}

To draw a trace as a line with markers, set mode to lines+markers:

"mode": "lines+markers"

Be careful with Insights data bindings

The Traces (data) tab includes both standard Plotly fields and Insights-generated fields. The Insights-generated fields connect the trace to the selected data source.

Do not remove or manually rewrite these fields unless you mean to disconnect or rebuild the trace data source:

source
channelRefX
channelRefY
channelRefZ
assetId
assetName
assetPath
attributeId
channelName
dataSourceId
dataSourceType

If you need to change which channel or data source a trace uses, use the settings panel when possible. Then return to the advanced editor for styling and Plotly-specific adjustments.

Edit chart layout

Use the Layout tab for chart-level styling and axis behavior. Common edits include:

Change the chart title.
Set axis titles.
Adjust margins.
Move or hide the legend.
Change gridline or axis colors.
Turn range sliders on or off.
Customize hover labels.

Example layout fields:

"title": {
  "text": "Bit Position"
},
"xaxis": {
  "title": {
    "text": "Time"
  }
},
"yaxis": {
  "title": {
    "text": "Bit Position (ft)"
  }
}

Edit chart interactions

Use the Config tab to change how users interact with the chart. Common Plotly config options include:

responsive: keeps the chart responsive as the widget resizes.
displayModeBar: shows or hides the Plotly mode bar.
displaylogo: shows or hides the Plotly logo.
scrollZoom: allows or prevents zooming with the mouse wheel or trackpad.
doubleClick: controls double-click behavior.

Example config:

{
  "displaylogo": false,
  "responsive": true,
  "displayModeBar": false,
  "scrollZoom": false
}

Apply or discard advanced changes

Click Apply to apply the JSON in the advanced editor to the widget.
Click Cancel to close the editor without applying your latest edits.
Click Reset to Defaults to restore the editor content to the widget defaults.

Troubleshooting

If the chart does not render, check that the active editor tab contains valid JSON.
If a trace disappears, confirm that the trace still has the correct data binding fields.
If the X axis is blank or unexpected, confirm whether the trace has an X data source selected. If X is empty, the widget uses time or depth based on the chart setup.
If styling changes do not appear, confirm that the property is in the correct tab. Trace styling belongs in Traces (data); chart-level styling belongs in Layout; interaction behavior belongs in Config.
If the chart becomes difficult to repair, close the editor with Cancel if you have not applied the change, or use Reset to Defaults and rebuild the chart from the settings panel.

Notes

The advanced editor uses Plotly JavaScript chart options. Not every Plotly option is appropriate for every chart type.
Use the settings panel for data-source selection whenever possible. Use the advanced editor for Plotly options that are not available in the settings panel.
Because this widget is in beta, confirm the chart still renders correctly after each advanced edit.

Search