# Bar charts

**URL:** https://community.glideapps.com/t/bar-charts/23956
**Category:** Ask for Help
**Created:** [March 8, 2021, 3:30pm UTC](https://community.glideapps.com/t/bar-charts/23956 "2021-03-08T15:30:41Z")
**Posts on this page:** 1
**Showing post:** 5

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [March 9, 2021, 8:27am UTC](https://community.glideapps.com/t/bar-charts/23956/5 "2021-03-09T08:27:58Z")

</div>

Not sure if this will help, but here is an example using a Stacked Bar chart…

> [@heart\_eyes Quickchart.io: the Cloudinary of Charts —on the fly charts!](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/125):
>
> So here is the one I did using the Construct URL column… Started off with a URL that looked like: https://quickchart.io/chart?bkg=white&c={.........} There are two query parameters in that URL: bkg=white c={ JSON structure } So I took the whole JSON structure, and put that in a template column: Then defined the Construct URL column as follows: The first query parameter was simple, so I “hard-coded” that, …

There are also lots of other examples in that same thread.

A good way to work with quickchart is to use their [sandbox](https://quickchart.io/sandbox/#%7B%0A%20%20%22type%22%3A%20%22bar%22%2C%0A%20%20%22data%22%3A%20%7B%0A%20%20%20%20%22labels%22%3A%20%5B%0A%20%20%20%20%20%20%22January%22%2C%0A%20%20%20%20%20%20%22February%22%2C%0A%20%20%20%20%20%20%22March%22%2C%0A%20%20%20%20%20%20%22April%22%2C%0A%20%20%20%20%20%20%22May%22%2C%0A%20%20%20%20%20%20%22June%22%2C%0A%20%20%20%20%20%20%22July%22%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22datasets%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22Dataset%201%22%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%22rgba(255%2C%2099%2C%20132%2C%200.5)%22%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%22rgb(255%2C%2099%2C%20132)%22%2C%0A%20%20%20%20%20%20%20%20%22borderWidth%22%3A%201%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20-31%2C%0A%20%20%20%20%20%20%20%20%20%20-70%2C%0A%20%20%20%20%20%20%20%20%20%20-30%2C%0A%20%20%20%20%20%20%20%20%20%20-33%2C%0A%20%20%20%20%20%20%20%20%20%20-9%2C%0A%20%20%20%20%20%20%20%20%20%2014%2C%0A%20%20%20%20%20%20%20%20%20%20-41%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22Dataset%202%22%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%22rgba(54%2C%20162%2C%20235%2C%200.5)%22%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%22rgb(54%2C%20162%2C%20235)%22%2C%0A%20%20%20%20%20%20%20%20%22borderWidth%22%3A%201%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%2073%2C%0A%20%20%20%20%20%20%20%20%20%2041%2C%0A%20%20%20%20%20%20%20%20%20%2029%2C%0A%20%20%20%20%20%20%20%20%20%2061%2C%0A%20%20%20%20%20%20%20%20%20%20-65%2C%0A%20%20%20%20%20%20%20%20%20%2059%2C%0A%20%20%20%20%20%20%20%20%20%2038%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%20%20%7D%2C%0A%20%20%22options%22%3A%20%7B%0A%20%20%20%20%22responsive%22%3A%20true%2C%0A%20%20%20%20%22legend%22%3A%20%7B%0A%20%20%20%20%20%20%22position%22%3A%20%22top%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22title%22%3A%20%7B%0A%20%20%20%20%20%20%22display%22%3A%20true%2C%0A%20%20%20%20%20%20%22text%22%3A%20%22Chart.js%20Bar%20Chart%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D) to try things out. Using that, you can fiddle with various settings to get the chart to look how you need it to, and then copy the Chart URL that’s auto-generated.

---

_[View the full topic](https://community.glideapps.com/t/bar-charts/23956)._
