Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
2 years ago
Solved

Rounded outline/border around KPI Card (new) in .json theme

I would like to have rounded corners (4 px) as shown for KPI 3 and KPI 4. I can't get my head around how to implement it. Here is the code I am working on: "cardVisual": { "*": {...
Need Help
  • hnguy71's avatar
    hnguy71
    2 years ago

    Hi Anonymous 

     

    try this:

     "cardVisual": {
      "*": {
        "shapeCustomRectangle": [
          {
            "$id": "default",
            "tileShape": "rectangleRounded",
            "rectangleRoundedCurveCustomStyle": true,
            "rectangleRoundedCurveLeftTop": 6,
            "rectangleRoundedCurveRightTop": 6,
            "rectangleRoundedCurveLeftBottom": 6,
            "rectangleRoundedCurveRightBottom": 6
          }
        ],
        "outline": [
          {
            "$id": "default",
            "lineColor": {
              "solid": {
                "color": "#B3B0AD"
              }
            },
            "show": true,
            "weight": 1
          }
        ],
        "border": [
          {
            "color": {
              "solid": {
                "color": "#FFFFFF"
              }
            },
            "show": true,
            "radius": 4
          }
        ]
      }
    }
  }

     

    The result:

     

hnguy71's avatar
hnguy71
Icon for Super User rankSuper User
2 years ago

Hi Anonymous 

 

try this:

 "cardVisual": {
      "*": {
        "shapeCustomRectangle": [
          {
            "$id": "default",
            "tileShape": "rectangleRounded",
            "rectangleRoundedCurveCustomStyle": true,
            "rectangleRoundedCurveLeftTop": 6,
            "rectangleRoundedCurveRightTop": 6,
            "rectangleRoundedCurveLeftBottom": 6,
            "rectangleRoundedCurveRightBottom": 6
          }
        ],
        "outline": [
          {
            "$id": "default",
            "lineColor": {
              "solid": {
                "color": "#B3B0AD"
              }
            },
            "show": true,
            "weight": 1
          }
        ],
        "border": [
          {
            "color": {
              "solid": {
                "color": "#FFFFFF"
              }
            },
            "show": true,
            "radius": 4
          }
        ]
      }
    }
  }

 

The result:

 

crispybc's avatar
crispybc
Frequent Visitor
1 year ago

Thanks, seems the "$id": "default"  is necesary for shapeCustomRectangle which is missing from a lot of auto generation tools