| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
age: 0
cache-control: max-age=600
content-encoding: gzip
content-type: text/html; charset=utf-8
date: Tue, 29 Jul 2025 23:05:48 GMT
etag: W/"687e6266-8589"
expires: Tue, 29 Jul 2025 23:15:48 GMT
last-modified: Mon, 21 Jul 2025 15:53:10 GMT
server: Vercel
strict-transport-security: max-age=63072000
vary: Accept-Encoding
via: 1.1 varnish
x-cache: MISS
x-cache-hits: 0
x-fastly-request-id: 4b757cfa2238379e8378e14d8c811dbfd0baf30b
x-github-request-id: 2780:17B405:F3F25:11FC40:688953C4
x-origin-cache: HIT
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210025-BOM
x-timer: S1753830348.288996,VS0,VE212
x-vercel-cache: MISS
x-vercel-id: bom1::47wcj-1753830348263-77d3ec07c984
content-length: 8410
Setting graph size in JavaScript
Setting Graph Size in JavaScript
How to change the size of D3.js-based graphs in javascript.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
var data = [
{
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
type: 'scatter'
}
];
var layout = {
autosize: false,
width: 500,
height: 500,
margin: {
l: 50,
r: 50,
b: 100,
t: 100,
pad: 4
},
paper_bgcolor: '#7f7f7f',
plot_bgcolor: '#c7c7c7'
};
Plotly.newPlot('myDiv', data, layout);
Set automargin=true (reference) and Plotly will automatically increase the margin size to prevent ticklabels from being cut off or overlapping with axis titles.
var data = [
{
x: ['Apples', 'Oranges', 'Watermelon', 'Pears'],
y: [3, 2, 1, 4],
type: 'bar'
}
];
var layout = {
autosize: false,
width: 500,
height: 500,
yaxis: {
title: {
text: 'Y-axis Title',
font: { size: 30 }
},
ticktext: ['long label','Very long label','3','label'],
tickvals: [1, 2, 3, 4],
tickmode: 'array',
automargin: true,
},
paper_bgcolor: '#7f7f7f',
plot_bgcolor: '#c7c7c7'
};
Plotly.newPlot('myDiv', data, layout);