When the visual chart builder isn’t enough — custom traces, exact styling, computed data — script the figure instead. This tutorial builds a grouped bar chart from code and ends with it inserted in your paper.
Step 1 — Open the JavaScript mode
In Figure Studio, open the Code tab and pick JavaScript. You get a code editor on the left and a live preview on the right; your script draws into the provided chart target.
Step 2 — Plot one series
Start with a single trace and press Run:
const data = [{
x: ['Group A', 'Group B', 'Group C'],
y: [42, 67, 55],
type: 'bar'
}];
Plotly.newPlot(chart, data, { margin: { t: 20 } });
The preview renders the bars immediately. If nothing appears, check the browser-style error shown under the preview — a missing bracket is the usual culprit.
Step 3 — Add a second series
Grouped bars need one trace per series and barmode: 'group' in the layout:
const cats = ['Group A', 'Group B', 'Group C'];
const data = [
{ x: cats, y: [42, 67, 55], type: 'bar', name: 'Series 1' },
{ x: cats, y: [38, 71, 49], type: 'bar', name: 'Series 2' }
];
Plotly.newPlot(chart, data, { barmode: 'group' });
The name on each trace becomes its legend entry.
Step 4 — Style it for print
A figure headed for a paper wants print-friendly fonts and a legend that doesn’t cover data. Set them in the layout — or pick a Journal Style in the side panel to match a target venue’s fonts and sizing:
Plotly.newPlot(chart, data, {
barmode: 'group',
font: { family: 'Times New Roman', size: 14 },
legend: { orientation: 'h', y: -0.2 }
});
Step 5 — Export or insert
Press Run one last time, then Export / Insert: export a vector PDF for LaTeX, or insert the figure straight into the current paper with a \label. The saved script reopens in this editor from the figure’s preview, so you always edit the code that made the chart — never a flattened image.
Tip: Keep the data inline and deterministic while you iterate — you can swap in a dataset from the project once the styling is right.