# Different color barchart glidepages

**URL:** <https://community.glideapps.com/t/different-color-barchart-glidepages/57801>\
**Category:** Ask for Help\
**Created:** [February 11, 2023, 5:11pm UTC](https://community.glideapps.com/t/different-color-barchart-glidepages/57801 "2023-02-11T17:11:17Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [February 11, 2023, 5:11pm UTC](https://community.glideapps.com/t/different-color-barchart-glidepages/57801/1 "2023-02-11T17:11:17Z")

</div>

Hi,  
I want to convert this google sheet data into a colorful barchart on Glidepages. I was able to create it using [quickchart.io](http://quickchart.io) but I want to be able to change the data directly from the app. On quick chart, I couldn’t figure out how to change data later.

I need the bars to be of the same color as I have in the google sheet cell.

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

 ![glide barchart](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/8/38905a523c91c7426f544d2582d207d1c5f0e4ae.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:** [February 11, 2023, 6:15pm UTC](https://community.glideapps.com/t/different-color-barchart-glidepages/57801/2 "2023-02-11T18:15:34Z")

</div>

Quickchart is just a url. If you change the contents of the url, then the image will change. Since you already have the base url constructed, then it’s just a matter of plugging it into a template column or a construct url column, and setting up the appropriate replacement values. Since your data is on multiple rows, then a joined list column will come into play here, and you will plug it into your template or construct url column.

With that said, wouldn’t a glide bar chart work in this case, or is it to limiting?

---

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [February 12, 2023, 12:26am UTC](https://community.glideapps.com/t/different-color-barchart-glidepages/57801/3 "2023-02-12T00:26:40Z")

</div>

It is limiting me to have custom color or in fact no color in Glide pages. All bars are having same colors.

---

<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:** [February 12, 2023, 12:39am UTC](https://community.glideapps.com/t/different-color-barchart-glidepages/57801/4 "2023-02-12T00:39:46Z")

</div>

OK, so quickchart is the way to go then for the custom colors. If you want to make each bar a different color, then you can change the ‘backgroundcolor’ attribute to an array of colors instead of just a single color. Each color should be in the same order as the data in the ‘data’ attrubute’.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/9/c9de07f7df30825833553ba9c4d972f661004bd3.png)

---

<div class="post-metadata">

**Author:** ![Ema\_Pop](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ema_pop/32/85890_2.png) [@Ema\_Pop](https://community.glideapps.com/u/Ema_Pop)\
**Post date:** [May 13, 2025, 9:15am UTC](https://community.glideapps.com/t/different-color-barchart-glidepages/57801/5 "2025-05-13T09:15:54Z")

</div>

Is there a free version of changing the colour of graphs in Glide?

[Quickchart.io](http://Quickchart.io) is paid for long term use seems like.

 ![Screenshot 2025-05-13 at 10.14.37 am](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/8/a8c41dd702f742cc0019c5c411967b46509f3ecf.png)

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [May 13, 2025, 10:19am UTC](https://community.glideapps.com/t/different-color-barchart-glidepages/57801/6 "2025-05-13T10:19:17Z")

</div>

Try the new chart component. It allows for custom colors. Make sure to enable it under preview

---

<div class="post-metadata">

**Author:** ![Ema\_Pop](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ema_pop/32/85890_2.png) [@Ema\_Pop](https://community.glideapps.com/u/Ema_Pop)\
**Post date:** [May 13, 2025, 10:41am UTC](https://community.glideapps.com/t/different-color-barchart-glidepages/57801/7 "2025-05-13T10:41:02Z")

</div>

Can you please share where the preview is? I have been using the bar chart component.

 ![Screenshot 2025-05-13 at 11.39.35 am](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/8/78e397a7e81078a3ce36d2bd574f2ab5806f85f4.png)

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [May 13, 2025, 10:48am UTC](https://community.glideapps.com/t/different-color-barchart-glidepages/57801/8 "2025-05-13T10:48:15Z")

</div>

It’s in the main dashboard with an overview of all your apps under settings

> [@Visualize data with the redesigned Charts component](https://community.glideapps.com/t/chart-component-now-in-public-preview/81500):
>
> Create powerful charts that aggregate your data out of the box package The new Chart component lets you group data by date or other columns. Use it with an existing dataset to start sharing insights with users brain Let us know what you think and share what you build! backhand_index_pointing_downWalkthrough Aggregate by Date Group by Column

---

<div class="post-metadata">

**Author:** ![DJP](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/djp/32/62545_2.png) [@DJP](https://community.glideapps.com/u/DJP)\
**Post date:** [May 13, 2025, 3:17pm UTC](https://community.glideapps.com/t/different-color-barchart-glidepages/57801/9 "2025-05-13T15:17:35Z")

</div>

Here is a Glide doc: [https://www.glideapps.com/docs/preview-features#enabling-preview-features](https://www.glideapps.com/docs/preview-features#enabling-preview-features)
