When a chart needs more than the builder offers, drop into code. Writano’s Code editor gives you a real JavaScript runtime with Plotly.js loaded, so you can script a figure exactly and still export it into your paper.
Your first Plotly chart
Open Figure Studio → Code → JavaScript Plotly / D3. The editor gives you a Plotly global and a target chart element. Paste this:
const data = [{
x: ['Group A', 'Group B', 'Group C'],
y: [42, 67, 55],
type: 'bar',
marker: { color: '#7c3aed' }
}];
Plotly.newPlot(chart, data, { margin: { t: 20 } });
Press Run. Everything executes in your browser — nothing is uploaded — and the chart appears in the preview.
Multiple series and grouped bars
Add another object to the data array with its own y values and a marker.color. Plotly groups bars by index automatically:
const cats = ['Group A', 'Group B', 'Group C'];
const data = [
{ x: cats, y: [42, 67, 55], type: 'bar', name: 'Series 1', marker: { color: '#7c3aed' } },
{ x: cats, y: [38, 71, 49], type: 'bar', name: 'Series 2', marker: { color: '#10b981' } }
];
Plotly.newPlot(chart, data, { barmode: 'group' });
Set barmode: 'group' for side-by-side bars, or 'stack' to stack them. The legend uses each series’ name.
Styling for a journal
Pick a Journal Style in the right panel to match Nature, Science, or IEEE fonts and sizing. Plotly layout options like font and legend are respected on export:
Plotly.newPlot(chart, data, {
barmode: 'group',
font: { family: 'Times New Roman', size: 14 },
legend: { orientation: 'h', y: -0.2 }
});
Exporting and inserting
Hit Export / Insert. Export to PDF for vector-perfect figures in your LaTeX document, or Insert to drop it straight into the current paper with a \ref label. Saving stores the chart in your project’s figures; clicking it later reopens it here for editing, and saving again updates it in place.