Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Portals
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find partner offers
    • Partner GTM Resources
    • Blog
    • Customer stories
    • Developer Plan
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • App development topics
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ·
    • Sign in
    • ·
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Connector Development
    • Power Query
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Galleries
    • Community Connections & How-To Videos
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Business Value Webinars and Video Gallery
    • Emergency Response Gallery
    • 2021 MSBizAppsSummit Gallery
    • 2020 MSBizAppsSummit Gallery
    • 2019 MSBizAppsSummit Gallery
    • Ideas
    • Power Apps Ideas
    • Community Engagement
    • Demo Extravaganza 2021
    • Demo Extravaganza - Components 2021
    • Power Apps Community Demo Extravaganza 2020
    • Experimental
    • Error Handling
    • Power Apps Experimental Features
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Canvas Apps Components Samples
    • KPI Gauge

    KPI Gauge

    02-25-2020 06:17 AM - last edited 12-17-2021 14:29 PM

    CYoung
    Frequent Visitor
    966 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    CYoung
    CYoung
    Frequent Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    KPI Gauge

    ‎02-25-2020 06:17 AM

    The gauge is an interactive component - the value variable can be set to a slider or an app variable. The guts of the component are an interactive SVG file that uses the following inputs.

     

    The inputs are:

    GaugeColorNo: the color that you want your gauge to show. I tend to use a formula so the color changes when the value changes. The Color must be in Hex format with the #

    GaugeValue: the value that drives the size of the line

    GaugeMaxValue: the max value that the gauge value could be - when the whole gauge is filled

    GaugeTargetValue: the value for your black hash marker, this MUST be less than your Max Value

    GaugeUnitText: the text, if any that you want at the bottom of the gauge
    GaugeValueText: the text, if any that you want in the center of the gauge. I usually use a Text of the Gauge value with the appropriate number of decimal places specified.

    GaugeUnitAdjustment: a number that you may have to play around with to ensure that the units text is centered

    GaugeValueAdjustment: a number that you may have to play around with to ensure that the value is centered
    BaseColorNo: the hex no of the base color.

    gaugered.PNG

    gaugegreen.PNG

    I learned how to do this by reading https://medium.com/@heyoka Mark Canon's post on donut charts, so I feel compelled to thank him for teaching me about dash arrays and offsets.

     

    Enjoy,

     

    CYoung

     

     

    Preview file
    7 KB
    Gauge.zip
    Labels:
    • Labels:
    • Components
    • dynamic svg
    • kpi
    Message 1 of 1
    966 Views
    1 Kudo
    Reply
    • All posts
    • Previous Topic
    • Next Topic

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Automate
    • Power Virtual Agents

    Power Apps

    • Sign in
    • Sign up

    Browse

    • Sample apps
    • Services

    Downloads

    • Studio
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2022 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks