gwolfe
05-09-2022Data Pipeline
Dynamic Sparkline Width
Hi, I have 2 questions about formatting sparklines in BloX.
1. Is there a way to make the width of the sparkline dynamic, rather than hard coding it?
2. How can I remove all the white space above my first textblock? I have the margin-top set to zero
{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"carouselAnimation": {
"showButtons": false
},
"body": [
{
"spacing": "medium",
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "<link rel=\"stylesheet\" href=\"https://pro.fontawesome.com/releases/v5.10.2/css/all.css\" integrity=\"sha384-XxNLWSzCxOe/CFcHcAiJAZ7LarLmw3f4975gOO6QkxvULbGGNDoSOTzItGUG++Q+\" crossorigin=\"anonymous\">"
},
{
"type": "TextBlock",
"text": "<i class=\"far fa-money-check-edit-alt\"></i>",
"horizontalAlignment": "center",
"size": "icon",
"color": "icon",
"style": {
"margin-top": "0px",
"margin-bottom": "0px",
"font-size": "1.3vw"
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"size": "small",
"weight": "bold",
"wrap": true,
"text": "Spacer",
"color": "white",
"style": {
"font-size": ".22vw"
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"size": "extraLarge",
"weight": "bold",
"wrap": true,
"text": "{panel:InvoicedLastMonth}",
"color": "darkgrey",
"style": {
"font-size": "1.5vw"
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"size": "small",
"weight": "bold",
"wrap": true,
"text": "Invoiced Last Month",
"color": "grey",
"style": {
"font-size": ".85vw"
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"size": "small",
"weight": "bold",
"wrap": true,
"text": "Spacer",
"color": "white",
"style": {
"font-size": ".5vw"
}
},
{
"spacing": "small",
"type": "TextBlock",
"text": "<span class='blox-sparkline' type='line' line-color='#117899' width='300' height='65' line-width='3' fill-color='#B2D4DF' point-color:'#117899'>{spark:InvoicedByMonth}</span>",
"horizontalAlignment": "center",
"size": "medium",
"weight": "bold",
"color": "grey"
}
]
}
]
}
I figured I can just set the width using a %.
"text": "<span class='blox-sparkline' type='line' line-color='#117899' width='85%' height='65' line-width='3' fill-color='#B2D4DF' point-color:'#117899'>{spark:InvoicedByMonth}</span>",
I was able to hide the title, and then change the padding on the configuration tab.
"titleStyle": [ { "display": "none" }