# 😍 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:** 3

<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 7, 2020, 6:33am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/41 "2020-10-07T06:33:48Z")

</div>

I see some other examples which look pretty neat too.

> **[Chartjs Radial Gauge Chart Samples](https://pandameister.github.io/chartjs-chart-radial-gauge/docs/samples/index.html)**

---

<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, 6:44am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/42 "2020-10-07T06:44:04Z")

</div>

I tried to customize it, change center number default and color, but didn’t find the code for this.

---

<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 7, 2020, 7:25am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/43 "2020-10-07T07:25:17Z")

</div>

@Lucas_Pires [https://github.com/pandameister/chartjs-chart-radial-gauge#options](https://github.com/pandameister/chartjs-chart-radial-gauge#options) Is this it?

---

<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, 7:36am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/44 "2020-10-07T07:36:22Z")

</div>

Well, I saw it too. But I mean to change it directly in the url like we can do it

---

<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 7, 2020, 7:42am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/45 "2020-10-07T07:42:25Z")

</div>

Ahh I see. Thanks

---

<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, 7:42am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/46 "2020-10-07T07:42:59Z")

</div>

It gave back an error image?

---

<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, 2:44pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/47 "2020-10-07T14:44:16Z")

</div>

In the url properties they offers, there’s no option to change the center label for exemple…

---

<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, 2:46pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/48 "2020-10-07T14:46:24Z")

</div>

Do you mean changing the text or the position?

---

<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, 2:48pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/49 "2020-10-07T14:48:36Z")

</div>

Everything lol

But the Max value. The pattern is 100…

---

<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, 2:49pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/50 "2020-10-07T14:49:49Z")

</div>

Can you have a draft of what you want your chart to look like? When I have time tomorrow I will jump into their sandbox page to try creating a demo URL.

---

<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, 2:55pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/51 "2020-10-07T14:55:10Z")

</div>

Well, this almost the same, i was just thinking about changing the center Max label because they offers just url and we can use as images too

Like

`https://quickchart.io/chart?c={type:'radialGauge',data:{datasets:[{data:[70],backgroundColor:'green'}]}}`

---

<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, 2:57pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/52 "2020-10-07T14:57:26Z")

</div>

Check out the options here if that helps:

> **[pandameister/chartjs-chart-radial-gauge](https://github.com/pandameister/chartjs-chart-radial-gauge#options)**
>
> chartjs radial gauge chart implementation. Contribute to pandameister/chartjs-chart-radial-gauge development by creating an account on GitHub.

I tried this just today but the animation doesn’t work. Other things work fine.

---

<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, 3:08pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/53 "2020-10-07T15:08:06Z")

</div>

Thanks @ThinhDinh, but that’s the same link @Rosewebstudio sent here up and didnt work a way to use in those url

Lol anyway, I’ve could use the way it is

Today I’ll share more about it 😌

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/a/a2a651c34098fa78ef51a9fa85b86c62d34123c5.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 7, 2020, 3:16pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/54 "2020-10-07T15:16:49Z")

</div>

Yeah, I’ve tried too. I managed to adjust the color of the ring, but have been unsuccessful with size/color.

---

<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:19pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/55 "2020-10-07T15:19:15Z")

</div>

By the way, the creators of Quickchart are responsive to user feedback. This progress bar chart was created two days after I requested one 😉

![Screen Shot 2020-10-07 at 11.18.19 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/8/852aaeb572bce1a6e447b4d4b462adc18e807727.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 7, 2020, 3:20pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/56 "2020-10-07T15:20:35Z")

</div>

I swear I have been able to do it today. Probably I read a chart.js doc instead of what they had on [Quickchart.io](http://Quickchart.io).

Like this?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/b/bd4e4a3646bfbe7291db6ce6542e374a8846fccd.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 7, 2020, 3:22pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/57 "2020-10-07T15:22:20Z")

</div>

For the half doughnut chart:

```
  https://quickchart.io/chart?bkg=transparent&w=600&h=400&c={
  "type": "doughnut",
  "data": {
    "datasets": [{
      "label": "foo",
      "data": [{MC}, {MIC}],
      "backgroundColor": [
        "green",
        "#C0C0C0"
      ],
      "textcolor":["#000555","#555555"],
      "borderWidth": 0,
    }] 
  },
  "options": {
    "rotation": Math.PI,
    "circumference": Math.PI,
    "cutoutPercentage": 75,
    "plugins": {
      "datalabels": { "display": false },
      "doughnutlabel": {
        "labels": [
          {
            "text": "{PE}25",
            "color":"#FFF",
            "font": {
              "size": "45",
              "weight":"bold",
            },
          },
          {
            "text": "\n{MC}/{TO} completed milestones",
            "color":"#FFF",
            "font": {
              "size": "25"
            },
          },
        ]
      }
    }		
  }
}
```

---

<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:22pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/58 "2020-10-07T15:22:58Z")

</div>

For the doughnut chart:

```
https://quickchart.io/chart?bkg=transparent&w=500&h=400&c={
  type: 'doughnut',
  data: {
labels: ['Vision Boards','Journals','Role Models'],
datasets: [{
  data: [{VB},{JO},{RM}],
  backgroundColor: ['#84ab84'
,'#c9a985','#e3adb8'],
}]
  },
  options: {
legend: { 
    position: 'right',
    align: 'middle',
    color: '#fff',
    labels: {
    fontColor: "white",
    fontSize: 14
            }
        },
plugins: {
  datalabels: {
    display: true,
    borderRadius: 3,
    color: '#fff',
    font: {
      backgroundColor: 'transparent',
      size: 15,
      weight: 'bold'
    }
  },
  doughnutlabel: {
    labels: [{
      text: '{TO}',
      color: '#fff',
      font: {
        backgroundColor: 'transparent',
        size: 40,
        weight: 'bold'
      }
    }, {
      text: 'items',
      color: '#fff',
    }]
  }
}
  }
}
```

---

<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:27pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/59 "2020-10-07T15:27:15Z")

</div>

Radial:  
`https://quickchart.io/chart?c={type:%27radialGauge%27,data:{datasets:[{data:[70],backgroundColor:%27green%27}]},options:{centerArea:{fontSize:100,fontColor:%27green%27}}}`

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

---

<div class="post-metadata">

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

</div>

Gorgeous. 🤩

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

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