Dynamic Sparkline Width

[gwolfe]

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"
                }
            ]
        }
    ]
}

[gwolfe · Accepted solution]

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>",

[gwolfe · Accepted solution]

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>",

[gwolfe · Accepted solution]

I was able to hide the title, and then change the padding on the configuration tab. 

    "titleStyle": [
        {
            "display": "none"
        }