# 😍 Quickchart.io: the Cloudinary of Charts —on the fly charts!

**URL:** <https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946>\
**Category:** Community Resources\
**Created:** [September 17, 2020, 2:11pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946 "2020-09-17T14:11:20Z")\
**Posts on this page:** 20\
**Page:** 4

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 7, 2020, 3:34pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/61 "2020-10-07T15:34:22Z")

</div>

Accepts RGB and hex as well, I love how customized we can get with this. Thanks for sharing it with the community Bob. It will keep my chart work in the Glide Editor as well, such a lifesaver.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [October 7, 2020, 3:58pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/62 "2020-10-07T15:58:22Z")

</div>

A few more parameters:  
`https://quickchart.io/chart?c={type:%27radialGauge%27,data:{datasets:[{data:[70],borderWidth:0,backgroundColor:%27%2300b703%27}]},options:{trackColor:%20%27%23973446%27,roundedCorners:false,centerArea:{fontFamily:%27Courier%27,fontSize:100,fontColor:%27white%27}}}`

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/a/ac6c40871943dc8f22f097cacddc6036a69d46a6.png)

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [October 7, 2020, 4:09pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/63 "2020-10-07T16:09:35Z")

</div>

Thanks master

---

<div class="post-metadata">

**Author:** ![wjcv06](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wjcv06/32/12747_2.png) [@wjcv06](https://community.glideapps.com/u/wjcv06)\
**Post date:** [October 19, 2020, 9:07pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/64 "2020-10-19T21:07:58Z")

</div>

I coudn’t configure the half doughnut chart, how did you do? D:

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 19, 2020, 11:24pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/65 "2020-10-19T23:24:43Z")

</div>

Here’s a link to the gauge chart sandbox.

> **[Sandbox | QuickChart](https://quickchart.io/sandbox/#%7B%0A%20%20%22type%22%3A%20%22doughnut%22%2C%0A%20%20%22data%22%3A%20%7B%0A%20%20%20%20%22datasets%22%3A%20%5B%7B%0A%20%20%20%20%20%20%22label%22%3A%20%22foo%22%2C%0A%20%20%20%20%20%20%22data%22%3A%20%5B12%2C%2088%5D%2C%0A%20%20%20%20%20%20%22backgroundColor%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%22rgba(255%2C%2099%2C%20132%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%22rgba(0%2C%200%2C%200%2C%200.1)%22%0A%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%22textcolor%22%3A%5B%22%23000555%22%2C%22%23555555%22%5D%2C%0A%20%20%20%20%20%20%22borderWidth%22%3A%200%2C%0A%20%20%20%20%7D%5D%20%0A%20%20%7D%2C%0A%20%20%22options%22%3A%20%7B%0A%20%20%20%20%22rotation%22%3A%20Math.PI%2C%0A%20%20%20%20%22circumference%22%3A%20Math.PI%2C%0A%20%20%20%20%22cutoutPercentage%22%3A%2075%2C%0A%20%20%20%20%22plugins%22%3A%20%7B%0A%20%20%20%20%20%20%22datalabels%22%3A%20%7B%20%22display%22%3A%20false%20%7D%2C%0A%20%20%20%20%20%20%22doughnutlabel%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22labels%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22%5CnEmail%20Open%20Rate%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22%23aaa%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22font%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22size%22%3A%20%2225%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22%5Cn12%25%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22font%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22size%22%3A%20%2240%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%09%09%0A%20%20%7D%0A%7D)**

---

<div class="post-metadata">

**Author:** ![wjcv06](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wjcv06/32/12747_2.png) [@wjcv06](https://community.glideapps.com/u/wjcv06)\
**Post date:** [October 20, 2020, 2:29am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/66 "2020-10-20T02:29:24Z")

</div>

thx!!!

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [October 20, 2020, 1:32pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/67 "2020-10-20T13:32:44Z")

</div>

Beautiful robert

---

<div class="post-metadata">

**Author:** ![Glen\_Sinclair](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/glen_sinclair/32/10594_2.png) [@Glen\_Sinclair](https://community.glideapps.com/u/Glen_Sinclair)\
**Post date:** [October 21, 2020, 2:23pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/68 "2020-10-21T14:23:21Z")

</div>

Thank you for this - it certainly is a game changer! I wonder if you would know if it is possible to add a “%” to the numbers in the Chart? e.g. changing 5 to 5% ? I was trying to read through their documentation but couldn’t find anything - thats not to say it isn’t there 🙂

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 21, 2020, 3:27pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/69 "2020-10-21T15:27:05Z")

</div>

Hi Glen, if you are talking specifically about the text inside the chart, here is the revelant part for Quickchart.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/8/85e743025bd8a657bee800b2075e3897d71d9386.png)

Just add % directly into the text.

---

<div class="post-metadata">

**Author:** ![Glen\_Sinclair](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/glen_sinclair/32/10594_2.png) [@Glen\_Sinclair](https://community.glideapps.com/u/Glen_Sinclair)\
**Post date:** [October 21, 2020, 3:42pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/70 "2020-10-21T15:42:36Z")

</div>

Thanks for the quick reply @ThinhDinh! Sory, I should have been more specific. I’m referring to the values in the actual chart that I pass in using the Template. I think in your example it will be VB,JO, RM ?  
Basically I have 3 values that populate the Doughnut chart which are percentages. In the screenshot I would ideally like to have 3%, 71% and 26%  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/9/9d6a11fcd0937abf51c2470d5f66407a8dba474c.png)

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [October 21, 2020, 3:52pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/71 "2020-10-21T15:52:53Z")

</div>

@Glen_Sinclair you could use the outlabeledPie instead if you need to put percentage in the diagram

> **[Documentation](https://quickchart.io/documentation/#pie-chart)**

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/7/705a7b0e6cfee57249964abfe7b992ec422a6455.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 21, 2020, 3:55pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/72 "2020-10-21T15:55:58Z")

</div>

This should be the answer Glen, if you still want the percentage on the original chart then you can calculate it yourself before pushing it as values to the URL I guess.

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [October 21, 2020, 3:56pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/73 "2020-10-21T15:56:31Z")

</div>

@Glen_Sinclair or use the formatter option

Look in this page : [Custom pie and doughnut chart labels in Chart.js | QuickChart](https://quickchart.io/documentation/chart-js/custom-pie-doughnut-chart-labels/)

> {  
> type: ‘doughnut’,  
> data: {  
> datasets: [  
> {  
> data: [10, 20, 15, 5, 50],  
> backgroundColor: [‘rgb(255, 99, 132)’, ‘rgb(255, 159, 64)’, ‘rgb(255, 205, 86)’, ‘rgb(75, 192, 192)’, ‘rgb(54, 162, 235)’,],  
> },  
> ],  
> labels: [‘Red’, ‘Orange’, ‘Yellow’, ‘Green’, ‘Blue’],  
> },  
> options: {  
> plugins: {  
> datalabels: {  
> formatter: (value) =\> {  
> return value + ‘%’;  
> }  
> }  
> }  
> }  
> }

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/5/54998159eac16ffd24f613b9005931b196a8c0e6.png)

---

<div class="post-metadata">

**Author:** ![Glen\_Sinclair](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/glen_sinclair/32/10594_2.png) [@Glen\_Sinclair](https://community.glideapps.com/u/Glen_Sinclair)\
**Post date:** [October 21, 2020, 4:10pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/74 "2020-10-21T16:10:09Z")

</div>

Legends!! Thank you @Krivo and @ThinhDinh for your help! The last post was the key. Thank you so very much!!  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/2/2c732c85eb5dc0989a655059dd3a8cab2f87b061.png)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [October 21, 2020, 4:34pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/75 "2020-10-21T16:34:19Z")

</div>

This is by far one of my favorite threads 🥳

---

<div class="post-metadata">

**Author:** ![Manuel\_Rodriguez\_do](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manuel_rodriguez_do/32/16448_2.png) [@Manuel\_Rodriguez\_do](https://community.glideapps.com/u/Manuel_Rodriguez_do)\
**Post date:** [October 29, 2020, 9:23am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/76 "2020-10-29T09:23:53Z")

</div>

Great discovery! Brings Glide charts to the next level! Just what I was looking for!

---

<div class="post-metadata">

**Author:** ![Manuel\_Rodriguez\_do](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manuel_rodriguez_do/32/16448_2.png) [@Manuel\_Rodriguez\_do](https://community.glideapps.com/u/Manuel_Rodriguez_do)\
**Post date:** [October 29, 2020, 11:48am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/77 "2020-10-29T11:48:21Z")

</div>

Have you looked in more detail in [Quickchart.io](http://Quickchart.io) pricing? There is a free tier called Community. But its not clear what does this means: “Limits - Rate limit enforced”

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [October 29, 2020, 1:55pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/78 "2020-10-29T13:55:48Z")

</div>

I haven’t looked into it now. I just know that it’s a fairly dynamic service that works well with Glide.

---

<div class="post-metadata">

**Author:** ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)\
**Post date:** [October 29, 2020, 2:01pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/79 "2020-10-29T14:01:26Z")

</div>

@Manuel_Rodriguez_do

Maybe best to email them to find out?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/0/0ee9721b06c2a8e9b0d6653910f3abbc90f57dff.jpeg)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/1/14f153e0c011fa1303916b65d5d089b20003bd85.jpeg)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [December 10, 2020, 6:33pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/80 "2020-12-10T18:33:59Z")

</div>

Another win:

Client wanted to track baby weight. They fill out lbs and oz. Math column to convert into value. Relation to self \> joinedText Columns \> Template column to create the quickchart image.

 ![Screen Shot 2020-12-10 at 1.28.42 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/4/342430973ceaed790a9825b29e18730abcd67a66.png)

[Previous page](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946.md?page=3)

[Next page](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946.md?page=5)