CSS: Quickchart Progress bar over Card layout

Example quickchart image:

https://quickchart.io/chart?height=30&bkg=transparent&c=%7B%0A%20%20type%3A%20'progressBar'%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20datasets%3A%20%5B%7B%0A%20%20%20%20%20%20data%3A%20%5B47%5D%2C%0A%20%20%20%20%20%20backgroundColor%3A'%2309B492'%2C%0Adatalabels%3A%20%7B%0Adisplay%3A%20false%2C%0A%7D%0A%20%20%20%20%7D%5D%2C%0A%20%20%7D%0A%7D

<pre><span><style>
.card-image-container, .card-image-container .image {
height: 10px !important;
padding-bottom: 0 !important;
}

/* Use this for progress bar on the bottom
[data-test="card-item"]  {
flex-direction: column-reverse;
}*/
18 Likes

Beautiful.

Bob, are you becoming a pro at css by any chance? :laughing:

I dunno about pro, but I know enough to be dangerous :wink:

4 Likes