replace the editor code with the below :
{
"style": ".btn:hover{text-decoration: none !important}",
"script": "",
"title": "",
"showCarousel": true,
"conditions": [
{
"minRange": "-Infinity",
"maxRange": -1,
"color": "#FA5656",
"image": "/plugins/BloX/blox-images/StockMarket/arrow-down.png"
},
{
"minRange": 0,
"maxRange": "Infinity",
"color": "#54a254",
"image": "/plugins/BloX/blox-images/StockMarket/arrow-up.png"
}
],
"body": [
{
"type": "Container",
"style": {
"padding": "25px 25px 25px 25px"
},
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"class": "conditional_image",
"url": "/plugins/BloX/blox-images/StockMarket/arrow-down.png",
"style": {
"margin": "auto"
},
"size": "small",
"spacing": "none"
}
]
},
{
"type": "Column",
"width": "10%",
"items": [
{
"spacing": "small",
"type": "TextBlock",
"class": "condition_data",
"text": "{panel:value}",
"horizontalAlignment": "left",
"size": "large",
"weight": "bold",
"color": "white"
}
]
},
{
"type": "Column",
"width": "30%",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "% of Invoices in Pro:",
"color": "#000",
"size": "large",
"weight": "bold"
},
{
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "{panel:percent} (Goal: 100%)",
"color": "#000",
"size": "medium",
"weight": "bold"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "<span class='blox-sparkline' type='line' line-color='#3a5694' width='150' height='40' line-width='2' fill-color='#c6d8f8' point-color:'#28467a'>{spark:spark_percent}</span>",
"horizontalAlignment": "left",
"spacing": "small"
}
],
"carouselAnimation": {
"showButtons": false
}
}
]
}
]
}
]
}
config code:
{
"fontFamily": "Open Sans",
"fontSizes": {
"default": 16,
"small": 14,
"medium": 22,
"large": 22,
"extraLarge": 50
},
"fontWeights": {
"default": 500,
"light": 100,
"bold": 700
},
"containerStyles": {
"default": {
"backgroundColor": "#ffffff",
"foregroundColors": {
"default": {
"normal": "#000000"
},
"white": {
"normal": "#ffffff"
},
"grey": {
"normal": "#A9A9A9"
},
"orange": {
"normal": "#f2B900"
},
"yellow": {
"normal": "#ffcb05"
},
"black": {
"normal": "#000000"
},
"lightGreen": {
"normal": "#3ADCCA"
},
"green": {
"normal": "#54a254"
},
"red": {
"normal": "#dd1111"
},
"accent": {
"normal": "#2E89FC"
},
"good": {
"normal": "#54a254"
},
"warning": {
"normal": "#e69500"
},
"attention": {
"normal": "#cc3300"
},
"pink": {
"normal": "#F3879F"
}
}
}
},
"imageSizes": {
"default": 40,
"small": 40,
"medium": 80,
"large": 160
},
"imageSet": {
"imageSize": "medium",
"maxImageHeight": 100
},
"actions": {
"color": "",
"backgroundColor": "",
"maxActions": 5,
"spacing": "small",
"buttonSpacing": 5,
"actionsOrientation": "horizontal",
"actionAlignment": "left",
"showCard": {
"actionMode": "inline",
"inlineTopMargin": 16,
"style": "default"
}
},
"spacing": {
"default": 5,
"small": 13,
"medium": 60,
"large": 20,
"extraLarge": 40,
"none": 0
},
"separator": {
"lineThickness": 1,
"lineColor": "#EAE9E9"
},
"factSet": {
"title": {
"size": "default",
"color": "default",
"weight": "bold",
"warp": true
},
"value": {
"size": "default",
"color": "default",
"weight": "default",
"warp": true
},
"spacing": 20
},
"supportsInteractivity": true,
"imageBaseUrl": "",
"height": 110
}
