Recommended Posts

I have installed thermometer gauge, The default fill colour is blue #008ee4.


is it possible that this colour can change as the thermometer fills up, for example from #008ee4   to #ff6600    to #ff0000 at different levels? 


here is the code I have in, (have tried different code to get the colour to change but to no avail. 


FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: 'thermometer',
        renderAt: 'chart-container2',
        id: 'temp-monitor',
        width: '100',
        height: '220',
        dataFormat: 'json',
manageResize: '1',
        dataSource: {
            "chart": {
                "caption": "Staff",
                "subcaption": "",
                "subcaptionFontBold": "0",
                "lowerLimit": "1",
                "upperLimit": "40",
                "numberSuffix": " S",                
                "bgColor": "#ffffff",
                "showBorder": "0",
                "thmFillColor": "#008ee4",
"showhovereffect": "1",
            "value": "0"



I am using V3.7.0

Share this post

Link to post
Share on other sites

Hi Ronan,


To change the fluid color fill you can make use of the "gaugeFillColor" attribute in the chart element and set it to any color as per your requirement.


Please refer the fiddle below for implementation:





Thank you Moonmi for your reply. I know by changing the colour in gaugeFillColor I can change the colour, however I want to have three different colours, for exampe when i is low the colour is red, at mid it is yellow, at high it is blue. All from the fillcolor. Any ideas on how I can achieve this? the LED gauge by fusion charts is a 3 colour fill.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now