Background Color for single card value

[PATAN]

I have a status field with two string values Dropped and Notdropped. If the value comes as Dropped, I want to show the background color as Green and if the value comes as Notdropped color should be green. 

How can i achive in single card value in splunk studio. 

[renjith_nair]

Isn't this a duplicate question answered a week back ?

https://community.splunk.com/t5/Splunk-Cloud-Platform/Single-card-value-background-color-change/m-p/...

[danspav]

Hi @PATAN,

With Dashboard Studio, you can either dynamically color the text OR the background - as far as I know, you can't do both.

You could achieve this effect a couple of ways though - create two visualisation panels, one for Dropped, and one for NotDropped, and make them show/hide depending on the value of the token.

Another option (if you are using Absolute mode) is to put a square behind the single value box which colors itself based on the token, and the single value changes the text color based on the token (with a transparent background).

Here's some example code:

{
    "visualizations": {
        "viz_UVeH0JP5": {
            "type": "splunk.singlevalue",
            "dataSources": {
                "primary": "ds_VyZ1EWbM"
            },
            "options": {
                "majorColor": "> majorValue | matchValue(majorColorEditorConfig)",
                "backgroundColor": "transparent"
            },
            "context": {
                "majorColorEditorConfig": [
                    {
                        "match": "NotDropped",
                        "value": "#2f8811"
                    }
                ]
            }
        },
        "viz_eKO2ikid": {
            "type": "splunk.rectangle",
            "options": {
                "fillColor": "> fillDataValue | rangeValue(fillColorEditorConfig)",
                "rx": 10,
                "strokeColor": "> strokeDataValue | matchValue(strokeColorEditorConfig)"
            },
            "context": {
                "fillColorEditorConfig": [
                    {
                        "value": "#171d21",
                        "to": 100
                    },
                    {
                        "value": "#088F44",
                        "from": 100
                    }
                ],
                "fillDataValue": "> primary | seriesByType(\"number\") | lastPoint()",
                "strokeDataValue": "> primary | seriesByType(\"number\") | lastPoint()",
                "strokeColorEditorConfig": [
                    {
                        "match": "Dropped",
                        "value": "#D41F1F"
                    },
                    {
                        "match": "NotDropped",
                        "value": "#d97a0d"
                    }
                ]
            },
            "dataSources": {
                "primary": "ds_dSLmtNBD"
            }
        }
    },
    "dataSources": {
        "ds_VyZ1EWbM": {
            "type": "ds.search",
            "options": {
                "query": "|  makeresults\n|  eval value=\"$status$\"\n|  table value"
            },
            "name": "dummy_search"
        },
        "ds_dSLmtNBD": {
            "type": "ds.search",
            "options": {
                "query": "|  makeresults\n|  eval value=if(\"$status$\"=\"Dropped\",100,0)\n|  table value"
            },
            "name": "background"
        }
    },
    "defaults": {
        "dataSources": {
            "ds.search": {
                "options": {
                    "queryParameters": {
                        "latest": "$global_time.latest$",
                        "earliest": "$global_time.earliest$"
                    }
                }
            }
        }
    },
    "inputs": {
        "input_global_trp": {
            "type": "input.timerange",
            "options": {
                "token": "global_time",
                "defaultValue": "-24h@h,now"
            },
            "title": "Global Time Range"
        },
        "input_I2IoVEpX": {
            "options": {
                "items": [
                    {
                        "label": "Dropped",
                        "value": "Dropped"
                    },
                    {
                        "label": "Not Dropped",
                        "value": "NotDropped"
                    }
                ],
                "token": "status",
                "selectFirstSearchResult": true
            },
            "title": "Dropdown Input Title",
            "type": "input.dropdown"
        }
    },
    "layout": {
        "type": "absolute",
        "options": {
            "width": 1440,
            "height": 960,
            "display": "auto"
        },
        "structure": [
            {
                "item": "viz_eKO2ikid",
                "type": "block",
                "position": {
                    "x": 610,
                    "y": 180,
                    "w": 250,
                    "h": 130
                }
            },
            {
                "item": "input_I2IoVEpX",
                "type": "input",
                "position": {
                    "x": 630,
                    "y": 70,
                    "w": 198,
                    "h": 82
                }
            },
            {
                "item": "viz_UVeH0JP5",
                "type": "block",
                "position": {
                    "x": 610,
                    "y": 180,
                    "w": 250,
                    "h": 130
                }
            }
        ],
        "globalInputs": [
            "input_global_trp"
        ]
    },
    "description": "",
    "title": "colors"
}

[shonias]

I just stumbled on this looking for something else,  and wanted to say you can dynamically colour both the background and the major value: 

"visualizations": {
        "viz_UVeH0JP5": {
            "type": "splunk.singlevalue",
            "dataSources": {
                "primary": "ds_VyZ1EWbM"
            },
            "options": {
                "majorColor": "> majorValue | matchValue(majorColorEditorConfig)",
                "backgroundColor": "> majorValue | matchValue(backgroungColorEditorConfig)"
            },
            "context": {
                "majorColorEditorConfig": [
                    {
                        "match": "NotDropped",
                        "value": "#2f8811"
                    },
                    {
                        "match": "Dropped",
                        "value": "#ffffff"
                    }
                ],
                "backgroundColorEditorConfig": [
                    {
                        "match": "NotDropped",
                        "value": "#000000"
                    },
                    {
                        "match": "Dropped",
                        "value": "#2f8811"
                    }
                ]
            }
        },

You probably can't do it though the UI, though. I rarely use it, so I'm not sure.