# Template + Quickchart.io inconsistency

**URL:** <https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604>\
**Category:** Ask for Help\
**Created:** [March 22, 2021, 8:53pm UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604 "2021-03-22T20:53:20Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joseph\_Leblanc](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joseph_leblanc/32/16002_2.png) [@Joseph\_Leblanc](https://community.glideapps.com/u/Joseph_Leblanc)\
**Post date:** [March 22, 2021, 8:53pm UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/1 "2021-03-22T20:53:20Z")

</div>

Dear Glide Community,

I start using a lot [QuickChart.io](http://QuickChart.io) to create nice and customizable chart in my app but I’m facing some strange bug or situations.

First when I generate the “template/API” through [quickchart.io](http://quickchart.io) the result is not very easy to use because a lot of % and extra data/letter are added like below. Is it possible to remove them or clean the result ? FYI, I’m able to use it despite the format but I’ll looking for something cleaner.  
Second question, I don’t understand why sometime some data are not replaced in my glideapp through the template ? Usually I sub the data in this template by _#_, _##_, _###_…  
In the example below the data 77 is sub by _#_ but in my app for some player/user it is not working ( I noticed that it happens only for some data without rounded number but not everytime). Is it a [quickchart.io](http://quickchart.io) bug ? a spreadsheet bug ? a glide table/template bug ? or I’m the bug 🙂

[https://quickchart.io/chart?c={ %20%20"type"%3A%20"horizontalBar"%2C %20%20"data"%3A%20{ %20%20%20%20"labels"%3A%20[%20%20%20%20%20%20"Serve%2FService"%2C %20%20%20%20%20%20"Set%2FPasse%20Haute"%2C %20%20%20%20%20%20"Bump%2FManchette"%2C %20%20%20%20%20%20"Spike%2FSmash"%2C %20%20%20%20%20%20"Block%2FContre"%2C %20%20%20%20]%2C %20%20%20%20"datasets"%3A%20[{ %20%20%20%20%20%20data%3A[77%2C%2022%2C%2033%2C%2044%2C%2055]%2C %20%20%20%20%20%20backgroundColor%3A%20[%20 %20%20%20%20%20%20'rgb(66%2C%20133%2C%20244)'%2C %20%20%20%20%20%20'rgb(219%2C%2068%2C%2055)'%2C %20%20%20%20%20%20'rgb(244%2C%20180%2C%200)'%2C %20%20%20%20%20%20'rgb(15%2C%20157%2C%2088)'%2C %20%20%20%20%20%20'rgb(180%2C%20180%2C%20180)'%2C%20]%2C %20%20%20%20}] %20%20}%2C %20%20"options"%3A%20{legend%3A%20{%20display%3A%20false%20}%2C %20%20%20%20"responsive"%3A%20true%2C %20%20%20%20"title"%3A%20{ %20%20%20%20%20%20"display"%3A%20false%2C %20%20%20%20%20%20"text"%3A%20"Chart.js%20Bar%20Chart" %20%20%20%20}%2C %20%20%20%20"plugins"%3A%20{ %20%20%20%20%20%20"roundedBars"%3A%20true%2C%20 %20%20%20%20} %20%20} }](https://quickchart.io/chart?c=%7B%0A%20%20%22type%22%3A%20%22horizontalBar%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%22Serve%2FService%22%2C%0A%20%20%20%20%20%20%22Set%2FPasse%20Haute%22%2C%0A%20%20%20%20%20%20%22Bump%2FManchette%22%2C%0A%20%20%20%20%20%20%22Spike%2FSmash%22%2C%0A%20%20%20%20%20%20%22Block%2FContre%22%2C%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22datasets%22%3A%20%5B%7B%0A%20%20%20%20%20%20data%3A%5B77%2C%2022%2C%2033%2C%2044%2C%2055%5D%2C%0A%20%20%20%20%20%20backgroundColor%3A%20%5B%20%0A%20%20%20%20%20%20%27rgb(66%2C%20133%2C%20244)%27%2C%0A%20%20%20%20%20%20%27rgb(219%2C%2068%2C%2055)%27%2C%0A%20%20%20%20%20%20%27rgb(244%2C%20180%2C%200)%27%2C%0A%20%20%20%20%20%20%27rgb(15%2C%20157%2C%2088)%27%2C%0A%20%20%20%20%20%20%27rgb(180%2C%20180%2C%20180)%27%2C%20%5D%2C%0A%20%20%20%20%7D%5D%0A%20%20%7D%2C%0A%20%20%22options%22%3A%20%7Blegend%3A%20%7B%20display%3A%20false%20%7D%2C%0A%20%20%20%20%22responsive%22%3A%20true%2C%0A%20%20%20%20%22title%22%3A%20%7B%0A%20%20%20%20%20%20%22display%22%3A%20false%2C%0A%20%20%20%20%20%20%22text%22%3A%20%22Chart.js%20Bar%20Chart%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22plugins%22%3A%20%7B%0A%20%20%20%20%20%20%22roundedBars%22%3A%20true%2C%20%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D)

The real code is =

{  
“type”: “horizontalBar”,  
“data”: {  
“labels”: [  
“Serve/Service”,  
“Set/Passe Haute”,  
“Bump/Manchette”,  
“Spike/Smash”,  
“Block/Contre”,  
],  
“datasets”: [{  
data:[77, 22, 33, 44, 55],  
backgroundColor: [  
‘rgb(66, 133, 244)’,  
‘rgb(219, 68, 55)’,  
‘rgb(244, 180, 0)’,  
‘rgb(15, 157, 88)’,  
‘rgb(180, 180, 180)’, ],  
}]  
},  
“options”: {legend: { display: false },  
“responsive”: true,  
“title”: {  
“display”: false,  
“text”: “Chart.js Bar Chart”  
},  
“plugins”: {  
“roundedBars”: true,  
}  
}  
}

Thank you in advance for your help or advice

---

<div class="post-metadata">

**Author:** ![Jacktools\_Net](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jacktools_net/32/18500_2.png) [@Jacktools\_Net](https://community.glideapps.com/u/Jacktools_Net)\
**Post date:** [March 22, 2021, 9:04pm UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/2 "2021-03-22T21:04:17Z")

</div>

You can use a tool like this to decode the url.

[https://www.webreload.de/url-encoding/](https://www.webreload.de/url-encoding/)

---

<div class="post-metadata">

**Author:** ![Joseph\_Leblanc](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joseph_leblanc/32/16002_2.png) [@Joseph\_Leblanc](https://community.glideapps.com/u/Joseph_Leblanc)\
**Post date:** [March 22, 2021, 9:22pm UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/3 "2021-03-22T21:22:51Z")

</div>

Thank you very useful to decode the [quickchart.io](http://quickchart.io) link generated …it is now very easy to use and modify to include inside glideApp Template functionality…but unfortunately it didn’t improve the issue with some data in my chart.

Thank again

---

<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:** [March 22, 2021, 11:10pm UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/4 "2021-03-22T23:10:23Z")

</div>

> [@Joseph\_Leblanc](#):
>
> I noticed that it happens only for some data without rounded number but not everytime

Can you elaborate on this? What is the error that Quickchart returns when they generate these cases?

---

<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 23, 2021, 1:52am UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/5 "2021-03-23T01:52:21Z")

</div>

> [@Joseph\_Leblanc](#):
>
> Second question, I don’t understand why sometime some data are not replaced in my glideapp through the template ? Usually I sub the data in this template by _#_ , _##_ , _###_ …

Are each of your template replacement variable names unique? (they must be to work properly).  
Can you show what your template column definition looks like?

Also, you may find the Construct URL column useful when you have complex chart definitions. See example of how to use it ⬇

> [@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, …

---

<div class="post-metadata">

**Author:** ![Joseph\_Leblanc](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joseph_leblanc/32/16002_2.png) [@Joseph\_Leblanc](https://community.glideapps.com/u/Joseph_Leblanc)\
**Post date:** [March 23, 2021, 8:08pm UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/6 "2021-03-23T20:08:39Z")

</div>

Hi Darren  
Thank you for taking the time to answer me. I create a video to show my situation. For the URL column I’m sure to have the need of that and to understand exactly how to use it (I’m pretty new in glide apps and “coding”) =\> [Loom | Free Screen & Video Recording Software](https://www.loom.com/share/9c674ec044cf4af4848de5ea8de7fcdc)  
I have also some strange bar (triangle) that appears for some data (see attachment) so it is strange I also reached [Support@quickchart.io](mailto:Support@quickchart.io) and they are looking on their side also.  
 ![Untitled](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/a/2aeeecdcd3ce0900174a38cd207eefcb278ddd8a.png)

---

<div class="post-metadata">

**Author:** ![Joseph\_Leblanc](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joseph_leblanc/32/16002_2.png) [@Joseph\_Leblanc](https://community.glideapps.com/u/Joseph_Leblanc)\
**Post date:** [March 23, 2021, 8:10pm UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/7 "2021-03-23T20:10:40Z")

</div>

Hi,  
Thank you for your help. Quickchart returns blank/no data bar or a “triangle”  
See my video =\> [Loom | Free Screen & Video Recording Software](https://www.loom.com/share/9c674ec044cf4af4848de5ea8de7fcdc)  
and the screenshot attached ![Untitled](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/a/2aeeecdcd3ce0900174a38cd207eefcb278ddd8a.png)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 23, 2021, 8:33pm UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/8 "2021-03-23T20:33:33Z")

</div>

Can you get a copy of the template column value after it’s ran through the replacements, and post the url here? Just want to make sure all of the replacement values worked correctly.

---

<div class="post-metadata">

**Author:** ![Joseph\_Leblanc](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joseph_leblanc/32/16002_2.png) [@Joseph\_Leblanc](https://community.glideapps.com/u/Joseph_Leblanc)\
**Post date:** [March 23, 2021, 8:43pm UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/9 "2021-03-23T20:43:00Z")

</div>

Sorry I’m sure to understand what you want me to share with you below the template inside the template column

```auto
https://quickchart.io/chart?c={
  "type": "horizontalBar",
  "data": {
    "labels": [
      "Serve/Service",
      "Set/Passe Haute",
      "Bump/Manchette",
      "Spike/Smash",
      "Block/Contre",
    ],
    "datasets": [{
      data:[_#_, _##_, _###_, _####_, _#####_],
      backgroundColor: [ 
      'rgb(66, 133, 244)',
      'rgb(219, 68, 55)',
      'rgb(244, 180, 0)',
      'rgb(15, 157, 88)',
      'rgb(180, 180, 180)', ],
    }]
  },
  "options": {legend: { display: false },
    "responsive": true,
    "title": {
      "display": false,
      "text": "Chart.js Bar Chart"
    },
    "plugins": {
      "roundedBars": true, 
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 23, 2021, 10:02pm UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/10 "2021-03-23T22:02:09Z")

</div>

That still has the # values that need to be replaced. I was hoping to see the result of the template after the # values have been replaced with actual data. I’m just trying to verify that the # values on the data block were replaced correctly.

Also when you post code like that be sure to use four backticks ```` before and after the url so it shows up correctly in the forum. You should also be able to highlight the url and click on the code block button `</>` so no additional formatting is applied by the forum and it shows exactly how you pasted it.

---

<div class="post-metadata">

**Author:** ![Joseph\_Leblanc](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joseph_leblanc/32/16002_2.png) [@Joseph\_Leblanc](https://community.glideapps.com/u/Joseph_Leblanc)\
**Post date:** [March 24, 2021, 1:32am UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/11 "2021-03-24T01:32:16Z")

</div>

Ok thank you for the advices about the forum. I hope I did well because I think I understood what you were asking me. So below the url to the quickchart generated inside my app after the template ran with my data. In this example a blue serve/service horizontalbar should be shown with 71 as data but it is not the case.

`https://quickchart.io/chart?c={%20%20%22type%22:%20%22horizontalBar%22,%20%20%22data%22:%20{%20%20%20%20%22labels%22:%20[%20%20%20%20%20%20%22Serve/Service%22,%20%20%20%20%20%20%22Set/Passe%20Haute%22,%20%20%20%20%20%20%22Bump/Manchette%22,%20%20%20%20%20%20%22Spike/Smash%22,%20%20%20%20%20%20%22Block/Contre%22,%20%20%20%20],%20%20%20%20%22datasets%22:%20[{%20%20%20%20%20%20data:[71,%2072,%2080,%2078,%20],%20%20%20%20%20%20backgroundColor:%20[%20%20%20%20%20%20%20%27rgb(66,%20133,%20244)%27,%20%20%20%20%20%20%27rgb(219,%2068,%2055)%27,%20%20%20%20%20%20%27rgb(244,%20180,%200)%27,%20%20%20%20%20%20%27rgb(15,%20157,%2088)%27,%20%20%20%20%20%20%27rgb(180,%20180,%20180)%27,%20],%20%20%20%20}]%20%20},%20%20%22options%22:%20{legend:%20{%20display:%20false%20},%20%20%20%20%22responsive%22:%20true,%20%20%20%20%22title%22:%20{%20%20%20%20%20%20%22display%22:%20false,%20%20%20%20%20%20%22text%22:%20%22Chart.js%20Bar%20Chart%22%20%20%20%20},%20%20%20%20%22plugins%22:%20{%20%20%20%20%20%20%22roundedBars%22:%20true,%20%20%20%20%20}%20%20}}`

in this second example the issue is the red set/passe haute category should show 78 but it not the case and in addition the green spike/smash category should be blank because the data is 0 for this player but it shows a green triangle

`https://quickchart.io/chart?c={%20%20%22type%22:%20%22horizontalBar%22,%20%20%22data%22:%20{%20%20%20%20%22labels%22:%20[%20%20%20%20%20%20%22Serve/Service%22,%20%20%20%20%20%20%22Set/Passe%20Haute%22,%20%20%20%20%20%20%22Bump/Manchette%22,%20%20%20%20%20%20%22Spike/Smash%22,%20%20%20%20%20%20%22Block/Contre%22,%20%20%20%20],%20%20%20%20%22datasets%22:%20[{%20%20%20%20%20%20data:[100,%2075,%2078,%20,%20],%20%20%20%20%20%20backgroundColor:%20[%20%20%20%20%20%20%20%27rgb(66,%20133,%20244)%27,%20%20%20%20%20%20%27rgb(219,%2068,%2055)%27,%20%20%20%20%20%20%27rgb(244,%20180,%200)%27,%20%20%20%20%20%20%27rgb(15,%20157,%2088)%27,%20%20%20%20%20%20%27rgb(180,%20180,%20180)%27,%20],%20%20%20%20}]%20%20},%20%20%22options%22:%20{legend:%20{%20display:%20false%20},%20%20%20%20%22responsive%22:%20true,%20%20%20%20%22title%22:%20{%20%20%20%20%20%20%22display%22:%20false,%20%20%20%20%20%20%22text%22:%20%22Chart.js%20Bar%20Chart%22%20%20%20%20},%20%20%20%20%22plugins%22:%20{%20%20%20%20%20%20%22roundedBars%22:%20true,%20%20%20%20%20}%20%20}}`

---

<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:** [March 24, 2021, 2:16am UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/12 "2021-03-24T02:16:45Z")

</div>

In the first example, the serve/service isn’t showing up because the leftmost boundary is 71, hence, you’re not seeing the value.

Comparing your code [with this one](https://quickchart.io/sandbox/#%7B%0A%20%20%22type%22%3A%20%22horizontalBar%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-32%2C%0A%20%20%20%20%20%20%20%20%20%2062%2C%0A%20%20%20%20%20%20%20%20%20%2064%2C%0A%20%20%20%20%20%20%20%20%20%2041%2C%0A%20%20%20%20%20%20%20%20%20%20-31%2C%0A%20%20%20%20%20%20%20%20%20%20-32%2C%0A%20%20%20%20%20%20%20%20%20%2087%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%22data%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%209%2C%0A%20%20%20%20%20%20%20%20%20%20-100%2C%0A%20%20%20%20%20%20%20%20%20%20-13%2C%0A%20%20%20%20%20%20%20%20%20%2064%2C%0A%20%20%20%20%20%20%20%20%20%20-57%2C%0A%20%20%20%20%20%20%20%20%20%2026%2C%0A%20%20%20%20%20%20%20%20%20%2020%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%22elements%22%3A%20%7B%0A%20%20%20%20%20%20%22rectangle%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22borderWidth%22%3A%202%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%2C%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%22right%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%20Horizontal%20Bar%20Chart%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D), I can’t tell what’s missing.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 24, 2021, 3:30am UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/13 "2021-03-24T03:30:07Z")

</div>

Below are both of your links decoded and corrected and the resulting charts. This first thing that jumped out to me was the incomplete data. You had five sets of data, but the first chart only had 4 numbers filled with 1 blank and the second chart only had 3 numbers filled with 2 blank. I think at a minimum, you should have a zero instead of a blank for a number.  
data:[71, 72, 80, 78,] → data:[71, 72, 80, 78, 0]  
data:[100, 75, 78, ,] → data:[100, 75, 78, 0, 0]

@Robert_Petitto made a good point on the chart showing the minimum value as the lowest data value, so whichever is lowest will not produce a bar. To fix that you need to set the scales to start at zero. I have corrected both urls with the correct scale and a full set of data. Hopefully that gets you closer to your end result. Depending on what you want, you may need to set a maximum for the scale as well.

Here’s the first link decoded:  
`https://quickchart.io/chart?c={ “type”: “horizontalBar”, “data”: { “labels”: [“Serve/Service”, “Set/Passe Haute”, “Bump/Manchette”, “Spike/Smash”, “Block/Contre”,], “datasets”: [{ data:[71, 72, 80, 78, 0], backgroundColor: [‘rgb(66, 133, 244)’, ‘rgb(219, 68, 55)’, ‘rgb(244, 180, 0)’, ‘rgb(15, 157, 88)’, ‘rgb(180, 180, 180)’,], }] }, “options”: {legend: { display: false },

“scales”: {xAxes: [{display: true, ticks: {suggestedMin: 0, beginAtZero: true} }] },

“responsive”: true, “title”: { “display”: false, “text”: “Chart.js Bar Chart” }, “plugins”: { “roundedBars”: true, } }}`

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

Here’s the second link decoded:  
`https://quickchart.io/chart?c={ “type”: “horizontalBar”, “data”: { “labels”: [“Serve/Service”, “Set/Passe Haute”, “Bump/Manchette”, “Spike/Smash”, “Block/Contre”,], “datasets”: [{ data:[100, 75, 78, 0, 0], backgroundColor: [‘rgb(66, 133, 244)’, ‘rgb(219, 68, 55)’, ‘rgb(244, 180, 0)’, ‘rgb(15, 157, 88)’, ‘rgb(180, 180, 180)’,], }] }, “options”: {legend: { display: false },

“scales”: {xAxes: [{display: true, ticks: {suggestedMin: 0, beginAtZero: true} }] },

“responsive”: true, “title”: { “display”: false, “text”: “Chart.js Bar Chart” }, “plugins”: { “roundedBars”: true, } }}`

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/7/b73ce2d07ffd3d682b1005bff8b4ee65fe6caf80.png)

---

<div class="post-metadata">

**Author:** ![Joseph\_Leblanc](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joseph_leblanc/32/16002_2.png) [@Joseph\_Leblanc](https://community.glideapps.com/u/Joseph_Leblanc)\
**Post date:** [March 24, 2021, 10:13pm UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/14 "2021-03-24T22:13:42Z")

</div>

thank you so much @Jeff_Hager and @Robert_Petitto for your help and analysis about my issue. It is now fixed. The issue were the 0 not present in my spreadsheet columns and also the axis scale not starting at 0. Now it is working nicely so thank you so much for taking the time to help me. By the way, support at @quickchart.io was also pretty amazing and very reactive/helpful.

---

<div class="post-metadata">

**Author:** ![Joseph\_Leblanc](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joseph_leblanc/32/16002_2.png) [@Joseph\_Leblanc](https://community.glideapps.com/u/Joseph_Leblanc)\
**Post date:** [April 1, 2021, 4:05pm UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/15 "2021-04-01T16:05:23Z")

</div>

Hi guys,

To follow this discussion and the use of quick chart inside Glide.  
I received a question I’m not able to answer from Ian ([support@quickchart.io](mailto:support@quickchart.io)) asking if Glide is able to manage encoding URL in the specific case below. Currently this [specific chart](https://quickchart.io/chart?c=%7B%0A%20%20type%3A%20%27bar%27%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20labels%3A%20%5B%27WEEK%201%27%2C%20%27WEEK%202%27%2C%20%27WEEK%203%27%2C%20%27WEEK%204%27%2C%20%27WEEK%205%20%27%2C%27WEEK%206%27%5D%2C%0A%20%20%20%20datasets%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22type%22%3A%20%22line%22%2C%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22Success%20Rate%22%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%22rgb(0%2C%200%2C%200)%22%2C%0A%20%20%20%20%20%20%20%20%22borderWidth%22%3A%202%2C%0A%20%20%20%20%20%20%20%20%22fill%22%3A%20false%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%2033%2C%0A%20%20%20%20%20%20%20%20%20%2044%2C%0A%20%20%20%20%20%20%20%20%20%2055%2C%0A%20%20%20%20%20%20%20%20%20%2066%2C%0A%20%20%20%20%20%20%20%20%20%2077%2C%0A%20%20%20%20%20%20%20%20%20%2088%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%20label%3A%20%27Serve%27%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20%20%27rgb(66%2C%20133%2C%20244)%27%2C%0A%20%20%20%20%20%20%20%20data%3A%20%5B22%2C23%2C24%2C25%2C26%5D%2C%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%20label%3A%20%27Set%27%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20%20%27rgb(219%2C%2068%2C%2055)%27%2C%0A%20%20%20%20%20%20%20%20data%3A%20%5B22%2C23%2C24%2C25%2C26%5D%2C%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%20label%3A%20%27Bump%27%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20%27rgb(244%2C%20180%2C%200)%27%2C%0A%20%20%20%20%20%20%20%20data%3A%20%5B22%2C23%2C24%2C25%2C26%5D%2C%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%20label%3A%20%27Spike%27%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20%20%27rgb(15%2C%20157%2C%2088)%27%2C%0A%20%20%20%20%20%20%20%20data%3A%20%5B22%2C23%2C24%2C25%2C26%5D%2C%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%20label%3A%20%27Block%27%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20%27rgb(180%2C%20180%2C%20180)%27%2C%0A%20%20%20%20%20%20%20%20data%3A%20%5B22%2C23%2C24%2C25%2C26%5D%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20%20%20%20%20plugins%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20datalabels%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20anchor%3A%20%27end%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20align%3A%20%27top%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%27%23fff%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20%27rgba(34%2C%20139%2C%2034%2C%200.6)%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20borderColor%3A%20%27rgba(34%2C%20139%2C%2034%2C%201.0)%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20borderWidth%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20borderRadius%3A%205%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20formatter%3A%20(value%2C%20ctx)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Array%20of%20visible%20datasets%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20let%20datasets%20%3D%20ctx.chart.data.datasets.filter(ds%20%3D%3E%20!ds._meta%5B0%5D.hidden)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(datasets.indexOf(ctx.dataset)%20%3D%3D%3D%20datasets.length%20-%201)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20This%20is%20the%20last%20visible%20dataset%20of%20the%20bar%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20let%20sum%20%3D%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20datasets.slice(1).map(dataset%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sum%20%2B%3D%20dataset.data%5Bctx.dataIndex%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20sum.toLocaleString(%20%2F*%20...%20*%2F%20)%20%2B%20%27%20hits%27%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20null%3B%0A%20%20%20%20%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%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20title%3A%20%7B%0A%20%20%20%20%20%20display%3A%20false%2C%0A%20%20%20%20%20%20text%3A%20%27%27%2C%0A%20%20%20%20%7D%2C%0A%20%20%20%20scales%3A%20%7B%0A%20%20%20%20%20%20xAxes%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20stacked%3A%20true%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20yAxes%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20stacked%3A%20true%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%7D) is working on [quickchart.io](http://quickchart.io) or on a regular browser but not as a glide template.

The quote from Ian Webster

_‘This is almost certainly happening because the chart portion of the URL needs to be URL-encoded. Wonder if there’s a way to do that in Glide?’_

The difference between a regular quickchart graph is this part of the code below

‘formatter: (value, ctx) =\> {  
// Array of visible datasets  
let datasets = ctx.chart.data.datasets.filter(ds =\> !ds.\_meta[0].hidden);  
if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {  
// This is the last visible dataset of the bar  
let sum = 0;  
datasets.slice(1).map(dataset =\> {  
sum += dataset.data[ctx.dataIndex];  
});  
return sum.toLocaleString( /\* … \*/ ) + ’ hits’;  
}’

A picture of the real chart expected in glide but not possible when data are pushed through a template.  
 ![Capture5](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/2/a25fe7971272832ea23b78a6618e59b68527eb43.png)

A picture of the result in glide when the quickchart link is use as a template

 ![Capture](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/b/ab3f927841bcf054ce042b8e4a896f5a46b1845b.png)

Any thoughts or answers to return to Quickchart ? It is definitely over my capacities and they are interested by the glide answer…

Thanks

---

<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:** [April 1, 2021, 4:19pm UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/16 "2021-04-01T16:19:29Z")

</div>

You could try it with a [Construct URL](https://docs.glideapps.com/all/reference/data-editor/computed-columns/construct-url) column. Below is an example of how to use that.

> [@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, …

---

<div class="post-metadata">

**Author:** ![Joseph\_Leblanc](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joseph_leblanc/32/16002_2.png) [@Joseph\_Leblanc](https://community.glideapps.com/u/Joseph_Leblanc)\
**Post date:** [April 2, 2021, 2:15pm UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/17 "2021-04-02T14:15:03Z")

</div>

Oouah ! thanks @Darren_Murphy  
I was so afraid to try this but it worked perfectly and it was so easy to set-up. The result is amazing and exactly what I was looking for.  
The glide community rocks another time. I’m going to answer and show the results to Ian at [Quickchart.io](http://Quickchart.io) support.

![Capture4](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/c/7c17fc3b4d6ba2edee92fc4e0b485fdc1401baee.png)

---

<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:** [April 2, 2021, 2:18pm UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/18 "2021-04-02T14:18:58Z")

</div>

Glad you got it working. Ian has been very supportive of the Glide community 👍

---

<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:** [April 2, 2021, 2:24pm UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/19 "2021-04-02T14:24:07Z")

</div>

That’s beautiful. Glad you got it worked.

---

<div class="post-metadata">

**Author:** ![Chris\_Young](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/chris_young/32/59118_2.png) [@Chris\_Young](https://community.glideapps.com/u/Chris_Young)\
**Post date:** [May 16, 2023, 4:39pm UTC](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604/20 "2023-05-16T16:39:50Z")

</div>

Hey I’m trying to include a Quickchart in my app, but when I copy the JSON from the Quickcharts sandbox into a template column and implement using the Construct URL method described above - I see the chart but not the “Options” and “Plugins” features from the JSON - so basically the quadrant background shading and annotations don’t show.

It’s this chart: [here](https://quickchart.io/sandbox#%7B%22chart%22%3A%22%7B%5Cn%20%20type%3A%20'scatter'%2C%5Cn%20%20data%3A%20%7B%5Cn%20%20%20%20datasets%3A%20%5B%5Cn%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20label%3A%20'Data'%2C%5Cn%20%20%20%20%20%20%20%20data%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%7B%20x%3A%20-1%2C%20y%3A%2010%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7B%20x%3A%20-15%2C%20y%3A%20-30%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7B%20x%3A%20-50%2C%20y%3A%2025%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7B%20x%3A%20-50%2C%20y%3A%20-75%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7B%20x%3A%2050%2C%20y%3A%20-75%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%5D%2C%5Cn%20%20%20%20%20%20%20%20backgroundColor%3A%20'red'%2C%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20label%3A%20'Multicolor%20Data'%2C%5Cn%20%20%20%20%20%20%20%20data%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%7B%20x%3A%20-10%2C%20y%3A%2010%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7B%20x%3A%20-75%2C%20y%3A%20-60%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7B%20x%3A%20-25%2C%20y%3A%2025%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7B%20x%3A%20-25%2C%20y%3A%20-40%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7B%20x%3A%2050%2C%20y%3A%2075%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%5D%2C%5Cn%20%20%20%20%20%20%20%20backgroundColor%3A%20%5B'green'%2C%20'blue'%2C%20'red'%2C%20'yellow'%2C%20'orange'%5D%2C%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%5D%2C%5Cn%20%20%7D%2C%5Cn%20%20options%3A%20%7B%5Cn%20%20%20%20scales%3A%20%7B%5Cn%20%20%20%20%20%20x%3A%20%7B%5Cn%20%20%20%20%20%20%20%20min%3A%20-100%2C%5Cn%20%20%20%20%20%20%20%20max%3A%20100%2C%5Cn%20%20%20%20%20%20%20%20grid%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20drawBorder%3A%20false%2C%5Cn%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20y%3A%20%7B%5Cn%20%20%20%20%20%20%20%20min%3A%20-100%2C%5Cn%20%20%20%20%20%20%20%20max%3A%20100%2C%5Cn%20%20%20%20%20%20%20%20grid%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20drawBorder%3A%20false%2C%5Cn%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20plugins%3A%20%7B%5Cn%20%20%20%20%20%20annotation%3A%20%7B%5Cn%20%20%20%20%20%20%20%20annotations%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20Q1%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'box'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20xMin%3A%200%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20xMax%3A%20100%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20yMin%3A%200%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20yMax%3A%20100%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20'rgba(255%2C%2099%2C%20132%2C%200.25)'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20borderColor%3A%20'transparent'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20Q2%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'box'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20xMin%3A%200%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20xMax%3A%20-100%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20yMin%3A%200%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20yMax%3A%20100%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20'rgba(99%2C%20255%2C%20132%2C%200.25)'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20borderColor%3A%20'transparent'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20Q3%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'box'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20xMin%3A%200%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20xMax%3A%20-100%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20yMin%3A%200%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20yMax%3A%20-100%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20'rgba(99%2C%20132%2C%20255%2C%200.25)'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20borderColor%3A%20'transparent'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20Q4%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'box'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20xMin%3A%200%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20xMax%3A%20100%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20yMin%3A%200%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20yMax%3A%20-100%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20'rgba(132%2C%20255%2C%20255%2C%200.25)'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20borderColor%3A%20'transparent'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20Label1%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'label'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20xValue%3A%2050%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20yValue%3A%2090%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%5B'Quadrant%201'%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20Label2%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'label'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20xValue%3A%20-50%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20yValue%3A%2090%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%5B'Quadrant%202'%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20Label3%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'label'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20xValue%3A%20-50%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20yValue%3A%20-90%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%5B'Quadrant%203'%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20Label4%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'label'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20xValue%3A%2050%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20yValue%3A%20-90%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%5B'Quadrant%204'%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%7D%2C%5Cn%20%20%7D%2C%5Cn%7D%22%2C%22width%22%3A500%2C%22height%22%3A300%2C%22version%22%3A%223%22%2C%22backgroundColor%22%3A%22%23fff%22%7D)

Any idea why that might be? Is glide somehow splitting the JSON?

[Next page](https://community.glideapps.com/t/template-quickchart-io-inconsistency/24604.md?page=2)