New to Kendo UI for jQueryStart a free 30-day trial

Configure the Colors of RadialGauge Ranges

Environment

ProductProgress® Kendo UI® RadialGauge for jQuery
Product Version2018.2.620

Description

How can I configure the colors and range of the Kendo UI RadialGauge?

Solution

  1. Determine the ranges by using the scale.ranges property of the RadialGauge.
  2. Adjust the colors for each range.
js
          $("#gauge").kendoRadialGauge({
            scale: {
              ...
              ranges: [
                {
                  from: 0,
                  to: 6,
                  color: "green"
                }, {
                  from: 6,
                  to: 8,
                  color: "yellow"
                }, {
                  from: 8,
                  to: 10,
                  color: "red"
                }
              ]
            }
          });

The following example demonstrates how to set the RadialGauge to display a series of ranges with unique colors.

    <div id="gauge"></div>

    <script>

      $(document).ready(function() {

        $("#gauge").kendoRadialGauge({

          pointer: {
            value: 0,
          },

          scale: {
            minorUnit: .25,
            startAngle: -30,
            endAngle: 210,
            max: 10,
            labels: {
              position: "inside"
            },
            ranges: [
              {
                from: 0,
                to: 6,
                color: "green"
              }, {
                from: 6,
                to: 8,
                color: "yellow"
              }, {
                from: 8,
                to: 10,
                color: "red"
              }
            ]
          }
        });
      });

    </script>

    <style>
      #gauge {
        width: 330px;
        height: 330px;
        margin: 0 auto 0;
      }
    </style>

See Also