New to Kendo UI for jQuery? Download free 30-day trial

    Getting Started with the ArcGauge

    This guide demonstrates how to get up and running with the Kendo UI for jQuery ArcGauge.

    After the completion of this guide, you will achieve the following end result:

    Open In Dojo

    1. Create a Div Element

    First, create a <div> element on the page that will be used to initialize the component.

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

    2. Initialize the ArcGauge

    In this step, you will initialize the ArcGauge from the <div> element.

        <div id="arc-gauge"></div>
    
        <script>
            $("#arc-gauge").kendoArcGauge();
        </script>

    3. Specify the Colors

    Here, you will specify the colors of the value pointer. The color of the pointer will change based on the current value of the ArcGauge component.

    Open In Dojo
        <div id="arc-gauge"></div>
        <script>
          $("#arc-gauge").kendoArcGauge({
            value: 63,
            colors: [{
              to: 50,
              color: 'yellow'
            }, {
              from: 50,
              color: 'orange'
            }]
          });
        </script>

    4. Customize the Scale

    The Kendo UI for jQuery ArcGauge provides multiple configuration options that you can use to customize the appearance of the scales. You can:

    • Set the intervals between the units.
    • Change the colors of the minor and major ticks.
    • Set margins, border colors, etc.

    To see the full list of the ArcGauge scale configuration options, see the ArcGauge API.

    In this step, you will add scale labels and style the major and minor ticks.

    Open In Dojo
        <div id="arc-gauge"></div>
        <script>
          $("#arc-gauge").kendoArcGauge({
            value: 63,
            colors: [{
              to: 50,
              color: 'yellow'
            }, {
              from: 50,
              color: 'lightgreen'
            }],
            scale: {            
              min: 10,
              max: 80,
              minorUnit: 5,
              labels: {
                visible: true,
                color: 'darkgreen',
                template: "#: value #",
                position: "outside"
              },
              minorTicks:{
                visible: true,
                size: 8, 
                color: 'green'
              },
              majorTicks:{
                visible: true,
                size: 15, 
                color: 'red'
              }
            }
          });
        </script>

    5. Add Content in the Center

    By default, the ArcGauge does not render content in the center. To add content and modify it according to your preferences use the centerTemplate.

        <div id="arc-gauge"></div>
        <script>
          $("#arc-gauge").kendoArcGauge({       
            value: 63,
            colors: [{
              to: 50,
              color: 'yellow'
            }, {
              from: 50,
              color: 'lightgreen'
            }],
            scale: {            
              min: 10,
              max: 80,
              minorUnit: 5,
              labels: {
                visible: true,
                color: 'darkgreen',
                template: "#: value #",
                position: "outside"
              },
              minorTicks:{
                visible: true,
                size: 8, 
                color: 'green'
              },
              majorTicks:{
                visible: true,
                size: 15, 
                color: 'red'
              }
            },
            centerTemplate: '<h2>#: value #%</h2>'
          });
        </script>

    Next Steps