• Recent
    • Tags
    • Popular
    • Register
    • Login

    Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

    Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website Mango 5 Documentation Website

    ma-gauge-chart customisation

    Dashboard Designer & Custom AngularJS Pages
    2
    3
    2.1k
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      shaun
      last edited by

      Hi Guys,

      I'm using the Admin Template, and trying to insert some ma-gauge-chart gauges.

      My colour theme is dark, so I've been trying to change the default black text/tick marks/needle on the guages, but I've had no luck.

      I've been trying to use the options="" and passing in options from here:

      http://docs.amcharts.com/3/javascriptstockchart/AmAngularGauge

      It looks like when I pass in values via the options property, the gauge disappears, causes rendering issues for the rest of the page, or behaves like there is no value being passed to it. I'm probably getting the syntax horribly wrong.

      Does some one have a working example they can share with me?

      Cheers!

      1 Reply Last reply Reply Quote 0
      • Jared WiltshireJ
        Jared Wiltshire
        last edited by Jared Wiltshire

        Hey shaun, I'd suggest the easiest way to set the colors on the gauge charts would be to use CSS. e.g.

        <style>
        .amcharts-gauge-arrow, .amcharts-gauge-arrow-nail {
            fill: red;
            stroke: red;
        }
        .amcharts-gauge-axis {
            fill: green;
            stroke: green;
        }
        .amcharts-axis-line {
            fill: inherit;
            stroke: inherit;
        }
        .amcharts-axis-label {
            fill: inherit;
            stroke: inherit;
        }
        .amcharts-axis-tick, .amcharts-axis-tick-minor {
            fill: inherit;
            stroke: inherit;
        }
        </style>
        

        Developer at Radix IoT

        1 Reply Last reply Reply Quote 0
        • S
          shaun
          last edited by

          Thanks Jared,

          This worked perfectly :)

          Cheers!

          1 Reply Last reply Reply Quote 0
          • First post
            Last post