DevExtreme 14.2.6

Just a DevExtreme chart, but running via a JSFiddle. Useful for reporting bugs

HTML

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="http://cdn3.devexpress.com/jslib/14.2.6/js/dx.all.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.2.6/css/dx.common.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.2.6/css/dx.light.css">
<div ng-app="Knob" ng-controller="myCtrl">
<div class="chart" data-ng-repeat="item in range">test</div>
</div>

CSS

.chart {
  width:150px;
  height:120px;
}

JavaScript

var App = angular.module('Knob', []);

App.controller('myCtrl', function($scope) {
$scope.range = [];
  for (var i=0; i<200; i++) {
      $scope.range.push(i);
    }
    
    console.log($scope.range);
    })



$(".chart").dxCircularGauge({
    scale: {
        startValue: 50,
        endValue: 150,
		tickInterval: 10,
        label: {
            useRangeColors: false
        }
    },    
    rangeContainer: {
        palette: 'pastel',
        ranges: [
            { startValue: 50, endValue: 90 },
            { startValue: 90, endValue: 130 },
            { startValue: 130, endValue: 150 },
        ]
    },
    title: {
        font: { size: 10 }
    },
    value: 105
});