Edit this page

Configure the Colors of RadialGauge Ranges

Environment

Product Radial Gauge for ProgressĀ® Kendo UIĀ®
Product Version 2018.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.
          $("#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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy