<div class="col-md-12 text-center">
  <canvas class="gauge-speed" style="margin-top:40px;" data-type="radial-gauge" data-width="200"
          data-glow="false" data-height="200" data-units="km/hr" data-title="Speed" data-min-value="0"
          data-max-value="120" data-major-ticks="0,20,40,60,80,100,120" data-minor-ticks="2" data-value="40"
          data-stroke-ticks="false"
          data-highlights='[{ "from": 0, "to": 60, "color": "#4caf50" },
                            { "from": 60, "to": 90, "color": "#ff9800" },
                            { "from": 80, "to": 120, "color": "#f44336" }]'
          Udata-color-needle-start="rgba(240, 128, 128, 1)" data-color-needle-end="rgba(255, 160, 122, .9)"
          data-value-box="true" data-animation-rule="linear" data-animation-duration="500"
          data-needle-shadow="false"></canvas>

          <div>
            <p style="margin-top: 10px; font-size:medium;">Speed</p>
          </div>
</div>