How to set the toolbar config for Plotly JSON Chart

💬 App Building
1

Hi,

I'm hydrating the Plotly JSON Chart component with JSON that I'm fetching from an internal service. I'm able to build the chart by setting the Data and Layout after successfully calling my service. I'm not able to figure out from trial-and-error or from documentation how I'm supposed to configure the plot's toolbar. Specifically, I'm trying to enable the "to image" builtin for Plotly charts. The component documentation seems to suggest that .toolbar can be set using an object with various flag fields, such as "showToImage".

Ref: The Plotly JSON Chart component for Retool Apps | Retool Docs

Any help would be greatly appreciated.

Thanks,
Robert

The Plotly JSON Chart component for Retool Apps

1 Like
2

An additional thing to note is that the default Plotly JSON Chart component seems to have the toolbar enabled, though I don't see any explicit settings to that effect.

image
image532×334 27.8 KB

1 Like
3

Hello @rww, welcome to the Retool Community!

I faced the same issue where toolbar options were not available by default when using 2D charts in the Plotly JSON Chart component. After checking the documentation and experimenting, I found that the toolbar is automatically included only for certain chart types like 3D charts (for example, scatter3d), whereas it’s not available for standard 2D charts.

To address this, I modified my transformer to output a 3D chart structure instead of a 2D chart. This ensures that the toolbar is visible with all its default options. Below is the transformer code I used for demonstration purposes:

const raw = [
  { region: "East", group: "A", value: 200 },
  { region: "East", group: "B", value: 310 },
  { region: "East", group: "C", value: 77 },
  { region: "East", group: "D", value: 215 },
  { region: "West", group: "A", value: 270 },
  { region: "West", group: "B", value: 230 },
  { region: "West", group: "C", value: 220 },
  { region: "West", group: "D", value: 112 },
  { region: "South", group: "A", value: 310 },
  { region: "South", group: "B", value: 240 },
  { region: "South", group: "C", value: 117 },
  { region: "South", group: "D", value: 240 }
];

// For demo, map region and group to numeric coordinates
const regionMap = { "East": 10, "West": 20, "South": 30 };
const groupMap = { "A": 1, "B": 2, "C": 3, "D": 4 };

// Generate x, y, z arrays for 3D scatter plot
const x = [];
const y = [];
const z = [];
const text = [];

raw.forEach(item => {
  x.push(regionMap[item.region]);
  y.push(groupMap[item.group]);
  z.push(item.value);
  text.push(`${item.region} - ${item.group}: ${item.value}`);
});

return {
  data: [
    {
      x: x,
      y: y,
      z: z,
      mode: "markers",
      type: "scatter3d",
      text: text,
      marker: {
        size: 8,
        color: z,
        colorscale: "Viridis",
        opacity: 0.8,
        line: {
          width: 0.5,
          color: 'rgba(0,0,0,0.5)'
        }
      }
    }
  ],
  layout: {
    title: "3D Scatter Plot of Regions, Groups and Values",
    scene: {
      xaxis: { title: "Region", tickvals: [10, 20, 30], ticktext: ["East", "West", "South"] },
      yaxis: { title: "Group", tickvals: [1, 2, 3, 4], ticktext: ["A", "B", "C", "D"] },
      zaxis: { title: "Value" }
    },
    margin: { l: 0, r: 0, t: 50, b: 0 },
    paper_bgcolor: "#f6f6f6",
    plot_bgcolor: "#f6f6f6",
    autosize: true
  }
};

Here is a screenshot for reference:

Screen Shot 2025-09-10 at 11.18.19 AM
Screen Shot 2025-09-10 at 11.18.19 AM1742×1210 186 KB

Note: Certain options such as showToImage are not available in the toolbar for 2D charts. The toolbar itself is only included by default in 3D charts like scatter3d, which is why switching to a 3D structure makes the toolbar visible.

I hope this explanation helps others who are trying to configure Plotly charts in Retool. If you have further questions or need assistance, feel free to ask!

2 Likes
4

Hi, thanks for the detailed response. I don't think this solution will work for me -- I need to render my data as a 2D multiline plot only, and I need the download image functionality -- but I appreciate the explanation.

Best,
Robert

1 Like
5

Well for anyone in the same situation, the best/most straightforward solution I've found is to just download the Plotly JSON Chart component as a PDF using a JS query and vanilla button component.

utils.downloadPage('chart.pdf', {
  componentsToInclude: ['plotlyJsonChart1'],
  scale: 4,
  fullscreen: true,
});
1 Like
6

Hi @rww,

It looks like you didn’t mention that you only need the functionality to download the Plotly JSON chart as a PDF via a script, triggered by any button outside the chart or after a query is successful. Instead, it seems you described it as if you want this functionality in the toolbar, as shown in the documentation.

1 Like
7

Hi, yes I'm using the PDF export from utils -- which is not ideal. It would be nice to just have access to all the built-in features for Plotly plots via the config API, which includes saving the chart as an image, and various other tools.

1 Like
8

Hi, currently the Plotly JSON chart component does not support dynamically adding configurations or modifying the toolbar. I’ve submitted this as a feature request for Retool here: Enhanced Toolbar and Dynamic Configuration for Plotly JSON Chart (2D Charts).

2 Likes
9

Yeah, as the Retool component is just a wrapper around the plotly API that it would be nice to just expose it everything. Doesn't make a lot of sense to me to prevent passing config JSON. I think a custom component that is just passthrough wrapper to Plotly.newPlot() is worth a try.

1 Like
10

Hey @rww, just checking in—were you able to get charts working with your custom component the way you wanted? Let me know if you still need a hand!

1 Like
11

I haven’t tried yet, but will report back if I have any success. Thanks.

1 Like