<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);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.