# Chart Polar

**URL:** <https://community.glideapps.com/t/chart-polar/31692>\
**Category:** Ask for Help\
**Tags:** custom-code\
**Created:** [September 13, 2021, 1:30am UTC](https://community.glideapps.com/t/chart-polar/31692 "2021-09-13T01:30:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [September 13, 2021, 1:30am UTC](https://community.glideapps.com/t/chart-polar/31692/1 "2021-09-13T01:30:54Z")

</div>

Hello,  
Here is a first approach to using graphics in addition to those offered by Glide.  
I used an open source library:

> **[Chart.js](https://www.chartjs.org/)**
>
> Simple yet flexible JavaScript charting library for the modern web

there is another chart model than the one in the demo.

WARNING: to integrate the graphic, I use the webview component, so you must have a pro package for this to work in publication !!!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/1/d13a123f32bcf62fa557a3de38fc62ae52cda3df.png)

YC link  
[https://Graph-URI.manun2.repl.co](https://Graph-URI.manun2.repl.co)

---

<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:** [September 13, 2021, 1:41am UTC](https://community.glideapps.com/t/chart-polar/31692/2 "2021-09-13T01:41:38Z")

</div>

Great! I believe Quickchart does not have something like this. They’re also built on top of chart.js.

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [September 13, 2021, 1:51am UTC](https://community.glideapps.com/t/chart-polar/31692/3 "2021-09-13T01:51:07Z")

</div>

Hi @ThinhDinh  
I watched Quickchart and the Polar is available.  
Except that for me it’s free and it’s interactive 😝 😝 😂 😜 😜 🥳 🥳 🥳 😝 🤣  
(it seems to me that Quickchart returns an image)

---

<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:** [September 13, 2021, 2:18am UTC](https://community.glideapps.com/t/chart-polar/31692/4 "2021-09-13T02:18:01Z")

</div>

Interactive is a big jump, and I love the animation as well. If you know well enough about chart.js then this can be the start to many great things chart-wise in Glide

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [September 13, 2021, 2:20am UTC](https://community.glideapps.com/t/chart-polar/31692/5 "2021-09-13T02:20:28Z")

</div>

I discover a little this library.  
I wanted to make a Gantt chart but that seems to limit with this solution.

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [September 13, 2021, 1:40pm UTC](https://community.glideapps.com/t/chart-polar/31692/6 "2021-09-13T13:40:05Z")

</div>

After this thread,

> [@Quickchart font color](https://community.glideapps.com/t/quickchart-font-color/31706):
>
> Hi guys, I designed a chart for my app but I cant figure out how to change the text color in a pie chart. I tried: color, textColor, fontColor… nothing in the documentation frowning I also need to resize the chart to get is smaller without changing the labels. I am also trying to insert this animation: animation.animateRotate: true but have no idea where to put in. { type: 'pie', data: { datasets: [{ data: [100,125,45], backgroundColor: [ …

I made a version with as parameter the configuration of the graph according to the ChatJs directives.  
It is possible to adjust the dimension of the chart  
(thanks to @ThinhDinh for it’s constructive idea.)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/4/44a72bba07c1d0e69b7b62d4378e43b6ecc09217.png)

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

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

YC link  
[https://Chart.manun2.repl.co](https://Chart.manun2.repl.co)