Quickchart font color

Ask for Help
1

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.

image
image397×837 53.1 KB 

{
  type: 'pie',
  data: {
    datasets: [
      {
        data: [100,125,45],
        backgroundColor: [
          '#f16558',
          '#965d5a',
           '#eabbb9'
        ],
        borderColor:'black',
        borderWidth: 0.5,
        
      },
    ],
    labels: ['פחמימה','חלבון','שומן']
    },
}

Please advice
Thanks

2

Try this.

{
  type: 'pie',
  data: {
    datasets: [
      {
        data: [100,125,45],
        backgroundColor: [
          '#f16558',
          '#965d5a',
           '#eabbb9'
        ],
        borderColor:'black',
        borderWidth: 0.5,
        
      },
    ],
    labels: ['פחמימה','חלבון','שומן']
    },
   options: { 
            legend: {
                labels: {
                    fontColor: "black",
                    fontSize: 12
                }
            },
            plugins: {
      datalabels: {
        color: "white",
      }
   }
}
}

image
image1000×600 28.2 KB

2 Likes
3

Exactly!

image
image399×830 45.4 KB

4

anything on the animation and the pie size?

5

How exactly do you want to change the size? I assume keeping everything else the same but the pie to be larger/smaller?

And what animation do you want?

It may not be available with Quickchart alone but Chart.js can support it through Yes-Code column.

6

Yes, keeping everything else the same and the pie smaller.
I would like to have it appear rotating

image
image1052×131 9.09 KB
.

I don’t really know how to use YC :frowning:

7

Successfully done.

Demo:

Link to plugin your YC column:

https://customized-pie-chart-js.thinhdinh.repl.co

Adapted from @Manu.n’s brilliant thread:

3 Likes
8

oh too loud, much better than mine.
I just had the idea of ​​proposing a version where instead of label, data, background it is possible to transmit the config, so that everyone can from the doc make their graph.

1 Like
9

What is the data format for QuickChart?
It’s like the config?

10

image
image722×1228 49.9 KB

Now supporting default width, height, label colors.

If you ask about the default data in the chart I defaulted it to what she described in her original post.

4 Likes
11

Yeah this can work, we can have the chart style customized to, to make it even more robust.

12

:exploding_head: :exploding_head: :exploding_head:

That looks amazing!

but I’m stuck…

image
image444×630 18.8 KB

image
image525×775 32.3 KB

image
image720×849 47.3 KB

13

You just need to plug the data in. I already did that work for you.

Have a template that only returns Carbs, Protein, Fat by its data.

14

That is unbelievable…
thanks so much.
If I ever want to change the design or the chart I will have to ask for your help again, correct?

15

If you want to make anything customizable then just tell me in this thread. I will make that part a variable so you just have to change it in the editor.

16

We should be able to use parameters to define the type of chart, right? That way we don’t need separate repl’s for each chart type?

1 Like
17

Yeah you’re right. We make this a variable.

image
image772×296 13.8 KB

18

Yeah! Want to try it? I’m not proficient enough in JS to get this done quickly…

19

It was my proposal

20

Hehe if I have some time this week I would love to try it. Also make the colors customizable too. I love some Glide chart color palettes but sometimes I want to make my own as well…