# Quickchart font color

**URL:** <https://community.glideapps.com/t/quickchart-font-color/31706>\
**Category:** Ask for Help\
**Created:** [September 13, 2021, 9:00am UTC](https://community.glideapps.com/t/quickchart-font-color/31706 "2021-09-13T09:00:48Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [September 13, 2021, 1:06pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/21 "2021-09-13T13:06:14Z")

</div>

Done! works.

> [@ThinhDinh](#):
>
> Hehe if I have some time this week I would love to try it.

Please do…  
I’m sure It will be helpful and I will defiantly use it often…

---

<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:07pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/22 "2021-09-13T13:07:09Z")

</div>

As you do so that it responds in size according to the size of the webview component. at home he does not want ☹

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [September 13, 2021, 1:10pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/23 "2021-09-13T13:10:03Z")

</div>

could you please change the text on the pie background to black for now? can be hard coded

---

<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:11pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/24 "2021-09-13T13:11:08Z")

</div>

Well, between my version and the version of @ThinhDinh  
I made a mix.  
The idea is to provide the config.  
As this each makes its graph with these parameters

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

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

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [September 13, 2021, 1:15pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/25 "2021-09-13T13:15:41Z")

</div>

That’s a good solution! but when changing the size the alignment is moved

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

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [September 13, 2021, 1:23pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/26 "2021-09-13T13:23:54Z")

</div>

for some reason cant see the black

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/d/7dea930a442a1fb68d3adc858882a7890ca0fa1e.png)  
is it only HEX?

---

<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:41pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/27 "2021-09-13T13:41:39Z")

</div>

I made a new version if you are interested.

> [@Chart Polar](https://community.glideapps.com/t/chart-polar/31692/6):
>
> After this thread, 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.) YC link [https://Chart.manun2.repl.co](https://Chart.manun2.repl.co)

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [September 13, 2021, 1:43pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/28 "2021-09-13T13:43:38Z")

</div>

now ok with right and left but cut at the bottom… almost there 🙂

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

---

<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:44pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/29 "2021-09-13T13:44:45Z")

</div>

adjust the size of the webview component

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [September 13, 2021, 1:45pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/30 "2021-09-13T13:45:12Z")

</div>

yess Im doing that and it is cuttings at the bottom

---

<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:46pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/31 "2021-09-13T13:46:40Z")

</div>

what size choose Height & width ?

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [September 13, 2021, 1:47pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/32 "2021-09-13T13:47:37Z")

</div>

yes my bad.  
have to leave the parameters blank

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [September 13, 2021, 1:48pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/33 "2021-09-13T13:48:45Z")

</div>

you guys are incredible!

---

<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:49pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/34 "2021-09-13T13:49:19Z")

</div>

and with filling ???

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [September 13, 2021, 1:50pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/35 "2021-09-13T13:50:50Z")

</div>

if you can add parameter for backgroundColor: [  
‘#ff7560’,  
‘#7ED3B2’,  
‘#FFCDA3’,  
],  
and labels and text color then you nailed the whole chart

---

<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:53pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/36 "2021-09-13T13:53:53Z")

</div>

you have to understand that the configuration is very strict, you must not forget a {} or a or check that there is not an extra ‘,’ or forget.  
This is why the first version was simpler.  
Can you give me a copy of your config with the errors.

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [September 13, 2021, 1:54pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/37 "2021-09-13T13:54:35Z")

</div>

stopped working

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [September 13, 2021, 1:55pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/38 "2021-09-13T13:55:02Z")

</div>

```auto
{
  type: 'pie',
  data: {
    datasets: [
      {
        data: [Carbs,Protein,Fat],
        backgroundColor: [
          '#ff7560',
          '#7ED3B2',
          '#FFCDA3',
        ],
 borderColor:'black',
borderWidth: 0.5,
      },
    ],
    labels: ['פחמימה','חלבון','שומן']
    },
   options: { 
            legend: {
                labels: {
                    fontColor: "white",
                    fontSize: 12
                }
            },
            plugins: {
      datalabels: {
        color: "black",
      }
   }
}
}

```

---

<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:59pm UTC](https://community.glideapps.com/t/quickchart-font-color/31706/39 "2021-09-13T13:59:39Z")

</div>

?? At home it works the first time !!!  
I just replaced the values ​​of Datas to do the test (I imagine a reference to other columns !!)

```auto
{
  type: 'pie',
  data: {
    datasets: [
      {
        data: [10,20,30],
        backgroundColor: [
          '#ff7560',
          '#7ED3B2',
          '#FFCDA3',
        ],
 borderColor:'black',
borderWidth: 0.5,
      },
    ],
    labels: ['פחמימה','חלבון','שומן']
    },
   options: { 
            legend: {
                labels: {
                    fontColor: "white",
                    fontSize: 12
                }
            },
            plugins: {
      datalabels: {
        color: "black",
      }
   }
}
}

```

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

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [September 14, 2021, 6:41am UTC](https://community.glideapps.com/t/quickchart-font-color/31706/40 "2021-09-14T06:41:00Z")

</div>

the size isnt changing ☹

[Previous page](https://community.glideapps.com/t/quickchart-font-color/31706.md?page=1)

[Next page](https://community.glideapps.com/t/quickchart-font-color/31706.md?page=3)