0
298
ViewsHow to increase the Width of Angular Gauge along the X-axis in Plotly.js?
I am new to Plotly.js. I am trying to figure out how to increase the width of the Angular Gauge. 
. I have gone through this documentation in detail. But I cannot find the parameter that will alter that width. I have also gone through other StackOverflow questions but unfortunately couldn't find what I was looking for. Attaching the code below.
var data = [
{
type: "indicator",
mode: "gauge+number+delta",
value: 420,
title: { text: "Speed", font: { size: 24 } },
delta: { reference: 400, increasing: { color: "RebeccaPurple" } },
gauge: {
axis: { range: [null, 500],showticklabels:"true",angle: "auto",tickwidth: 1, tickcolor: "darkblue" },
bar: { color: "darkblue",line:{color:"#FFC0CB", width:"5"},thickness:"0.7" },
shape:"angular",
bgcolor: "black",
borderwidth: 2,
bordercolor: "gray",
steps: [
{ range: [0, 250], color: "cyan" },
{ range: [250, 400], color: "royalblue" }
],
//red arrow at the end
threshold: {
line: { color: "red", width: 4 },
thickness: 0.6,
value: 490
}
}
}
];
var layout = {
width: 500,
height: 400,
margin: { t: 25, r: 25, l: 25, b: 25 },
paper_bgcolor: "lavender",
font: { color: "darkblue", family: "Arial" }
};
Plotly.newPlot('myDiv', data, layout);<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-2.4.2.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
·
Juan Pablo Isaza
Answer question