<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
var data=[{
type: "indicator",
mode: "gauge+number+delta",
value: 20,
title: {
text: 'Speed',
font: { size: 14 },
yanchor: 'bottom',
y: 10
},
delta: { increasing: { color: "white" } },
gauge: {
shape: 'angular',
axis: {
range: [0, 100],
visible: true,
tickwidth: 1,
tickcolor: "rgb(178, 178, 178)",
tickvals: [0, 100],
tickmode: 'array',
tickfont: {
size: '100px'
}
},
bar: { color: "rgb(237, 61, 61)", thickness: 1 },
bgcolor: "rgb(178, 178, 178)",
bordercolor: "rgb(178, 178, 178)",
}
}];
var layout = {
margin: {
l: 30,
r: 30,
b: 5,
t: 0,
pad: 0
}
};
Plotly.newPlot('myDiv', data, layout);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.