Unplanned
Last Updated: 13 Feb 2025 08:23 by ADMIN
Chris
Created on: 06 Feb 2025 20:53
Category: Kendo UI for jQuery
Type: Feature Request
0
Radial Gauge and Linear Gauge CenterTemplate Property

Would like to request that the ability to set a 'CenterTemplate' be added to the Radial and Linear Gauge charts. We show a percentage based label using jquery by appending to the chart wrap a label to show 'x of y (z%)'. What we've seen is that when you go to export the chart, this label doesn't follow with it.

When using other charting types, for example the Arc Gauge or Circular Gauge, they do have a property called 'CenterTemplate' which allows us to do labels like above and have it export correctly.

Can the property be added to other Charts so that we can customize a label to show information such as percentage based text?

1 comment
ADMIN
Nikolay
Posted on: 13 Feb 2025 08:23

Hi Chris,

This can be achieved by adding a div element below the Gauge. For example:

  <div id="gauge-container">
        <div id="gauge"></div>
        <div id="num"></div>
      </div>

      <script>
        function createGauge() {
          let gauge = $("#gauge").kendoRadialGauge({
            pointer: {
              value: 65
            },
            scale: {
              minorUnit: 5,
              startAngle: -30,
              endAngle: 210,
              max: 100
            }
          }).data("kendoRadialGauge");
          
          let val = gauge.value() + " of 100 (" + gauge.value() + "%)"
          $("#num").html(val);
        }

        $(document).ready(function () {
          createGauge();
        });
      </script>

Dojo demo: https://dojo.telerik.com/QxPqXZzx

Please let me know if this is similar to what you are looking for.

Regards,
Nikolay
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.