# \[Solved\] Is it possible to create a pie chart?

**URL:** <https://community.thunkable.com/t/solved-is-it-possible-to-create-a-pie-chart/192465>\
**Category:** Questions about Thunkable X\
**Tags:** solved\
**Created:** [August 22, 2019, 5:26pm UTC](https://community.thunkable.com/t/solved-is-it-possible-to-create-a-pie-chart/192465 "2019-08-22T17:26:02Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![point](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/point/32/113590_2.png) [@point](https://community.thunkable.com/u/point)\
**Post date:** [August 22, 2019, 5:26pm UTC](https://community.thunkable.com/t/solved-is-it-possible-to-create-a-pie-chart/192465/1 "2019-08-22T17:26:02Z")

</div>

Hi, I want to create a pie chart in my application.  
How can this be done?

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [August 22, 2019, 7:04pm UTC](https://community.thunkable.com/t/solved-is-it-possible-to-create-a-pie-chart/192465/2 "2019-08-22T19:04:13Z")

</div>

Hi,

You can see an example of a line graph on the scrChart screen. Change it to pie (see Google Chart).

[https://x.thunkable.com/projects/5d370bd8814895afb4300c50/project/properties/designer/](https://x.thunkable.com/projects/5d370bd8814895afb4300c50/project/properties/designer/)

---

<div class="post-metadata">

**Author:** ![point](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/point/32/113590_2.png) [@point](https://community.thunkable.com/u/point)\
**Post date:** [September 27, 2019, 3:04pm UTC](https://community.thunkable.com/t/solved-is-it-possible-to-create-a-pie-chart/192465/4 "2019-09-27T15:04:33Z")

</div>

Is it possible to set a unique color for each segment in the chart?

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [September 27, 2019, 6:26pm UTC](https://community.thunkable.com/t/solved-is-it-possible-to-create-a-pie-chart/192465/5 "2019-09-27T18:26:11Z")

</div>

It is possible, additional information on [https://developers.google.cn/chart/interactive/docs/gallery/piechart?hl=en](https://developers.google.cn/chart/interactive/docs/gallery/piechart?hl=en) page

---

<div class="post-metadata">

**Author:** ![point](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/point/32/113590_2.png) [@point](https://community.thunkable.com/u/point)\
**Post date:** [September 27, 2019, 6:39pm UTC](https://community.thunkable.com/t/solved-is-it-possible-to-create-a-pie-chart/192465/6 "2019-09-27T18:39:09Z")

</div>

Thanks, but how can the color be changed? What should be added to the text🤔?  
You can update the text😅:

```
 data:text/html,<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/><html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work', 11],
          ['Eat', 2],
          ['Commute', 2],
          ['Watch TV', 2],
          ['Sleep', 7]
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>
```

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [September 27, 2019, 9:00pm UTC](https://community.thunkable.com/t/solved-is-it-possible-to-create-a-pie-chart/192465/7 "2019-09-27T21:00:57Z")

</div>

For a more convenient operation, I suggest you first make the changes in a html-file and view them in the browser. If all is well, then after that copy the code in Thunkable X. code with color change is given below

```
data:text/html,<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work', 11],
          ['Eat', 2],
          ['Commute', 2],
          ['Watch TV', 2],
          ['Sleep', 7]
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
		  colors:['red','#004411','yellow','#005647','green','#567876']
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>
```

---

<div class="post-metadata">

**Author:** ![point](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/point/32/113590_2.png) [@point](https://community.thunkable.com/u/point)\
**Post date:** [September 28, 2019, 1:23pm UTC](https://community.thunkable.com/t/solved-is-it-possible-to-create-a-pie-chart/192465/8 "2019-09-28T13:23:07Z")

</div>

How do you define each color segment of your own?  
I want to give each segment of the chart its own color (colors should be fixed and there may be more or less than 10 segments in the chart)  
Here is the list of colors:

> #4CAF50,#FF0402, #3366FF #CC33CC,#FF6602,#666666,#FFCC32,#993399,#FF9966,#CC6601

Sorry I don’t understand😅

---

<div class="post-metadata">

**Author:** ![point](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/point/32/113590_2.png) [@point](https://community.thunkable.com/u/point)\
**Post date:** [September 28, 2019, 1:36pm UTC](https://community.thunkable.com/t/solved-is-it-possible-to-create-a-pie-chart/192465/9 "2019-09-28T13:36:37Z")

</div>

No matter, I already succeeded  
Here’s the result:

`data:text/html,<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/><html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', is3D: true, slices: { 0: { color: '#4CAF50' }, 1: { color: '#FF0402' }, 2: { color: '#3366FF' }, 3: { color: '#CC33CC' }, 4: { color: '#FF6602' }, 5: { color: '#666666' }, 6: { color: '#FFCC32' }, 7: { color: '#993399' }, 8: { color: '#FF9966' }, 9: { color: '#CC6601' } } }; var chart = new google.visualization.PieChart(document.getElementById('piechart_3d')); chart.draw(data, options); } </script> </head> <body> <div id="piechart_3d" style="width: 900px; height: 500px;"></div> </body> </html>`

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [February 19, 2021, 9:03pm UTC](https://community.thunkable.com/t/solved-is-it-possible-to-create-a-pie-chart/192465/10 "2021-02-19T21:03:26Z")

</div>

Updated solution here

> [@\[Tutorial\] Dynamic interactive charts](https://community.thunkable.com/t/how-to-create-charts-using-the-webviewer/563880):
>
> I wanted to post this example for those who are making quiz apps or study apps. The ability to see your progress visually is uber important. This is why we have charts in the first place. seeItLive incorporating charts in the past has been difficult. Here is an easy example you can fork or use yourself to incorporate a correct/incorrect chart into your app. This is based on the standard celebration chart that is used in the world of Precision Teaching and Applied Behavior Analysis. This allows…

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 12:08pm UTC](https://community.thunkable.com/t/solved-is-it-possible-to-create-a-pie-chart/192465/11 "2024-11-08T12:08:49Z")

</div>


