# How to use existing cumulocity widgets(pie chart) as part of custom widget
**URL:** https://community.cumulocity.com/t/how-to-use-existing-cumulocity-widgets-pie-chart-as-part-of-custom-widget/1209
**Category:** Forum
**Tags:** cumulocity
**Created:** [October 27, 2020, 6:22am UTC](https://community.cumulocity.com/t/how-to-use-existing-cumulocity-widgets-pie-chart-as-part-of-custom-widget/1209 "2020-10-27T06:22:25Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@kiranpokharkar](https://community.cumulocity.com/u/kiranpokharkar)
#### Post date: [October 27, 2020, 6:22am UTC](https://community.cumulocity.com/t/how-to-use-existing-cumulocity-widgets-pie-chart-as-part-of-custom-widget/1209/1 "2020-10-27T06:22:25Z")
I wanted to show a pie chart widget which is already provided by cumuloicty in custom widget
how to reuse it ?
---
### Author:  [@Matthew\_Barnes](https://community.cumulocity.com/u/Matthew_Barnes)
#### Post date: [November 3, 2020, 5:41pm UTC](https://community.cumulocity.com/t/how-to-use-existing-cumulocity-widgets-pie-chart-as-part-of-custom-widget/1209/2 "2020-11-03T17:41:52Z")
I assume you are referring to the pie chart for measurements. The source code for that is not currently available but there are good examples of how to build a pie chart on the open source git repository. [GitHub - Cumulocity-IoT/cumulocity-device-chart-widget: This is an Angular 8 widget, which is designed to display the chart based on the device-specific inventory data. Runtime installation available. Created by Global Presales.](https://github.com/Cumulocity-IoT/cumulocity-device-chart-widget)
I hope this helps
---
### Author:  [@kiranpokharkar](https://community.cumulocity.com/u/kiranpokharkar)
#### Post date: [November 11, 2020, 6:45am UTC](https://community.cumulocity.com/t/how-to-use-existing-cumulocity-widgets-pie-chart-as-part-of-custom-widget/1209/3 "2020-11-11T06:45:30Z")
Thanks for the reply @Matthew_Barnes
I added a pie chart using ng2-chart library. it works perfectly.
I set the color of the legend of the pie chart to “white” color as per requirement, but if I switch the theme to light from appearance then the legend of the pie chart is not visible(As the color of background and legend are the same) but rest of html is changed from white to black automatically.
so my question is how to handle this ?
is there any way to get a selected theme and then we can handle color manually?
or any alternative?
---
### Author:  [@khushi](https://community.cumulocity.com/u/khushi)
#### Post date: [November 12, 2020, 11:46am UTC](https://community.cumulocity.com/t/how-to-use-existing-cumulocity-widgets-pie-chart-as-part-of-custom-widget/1209/4 "2020-11-12T11:46:04Z")
We can change the legend color manually by the setting the font Color in charts option.
For example:
```auto
options: {
legend: {
display: true,
labels: {
fontColor: 'rgb(255, 99, 132)'
}
}
}
```
The color can be set manually in the widget configuration.
---
### Author:  [@kiranpokharkar](https://community.cumulocity.com/u/kiranpokharkar)
#### Post date: [November 16, 2020, 5:13am UTC](https://community.cumulocity.com/t/how-to-use-existing-cumulocity-widgets-pie-chart-as-part-of-custom-widget/1209/5 "2020-11-16T05:13:11Z")
Thanks for the reply @Matthew_Barnes @khushi
I already set fontColor of legend to ‘white’ but the problem is if I switch the theme color of widget to light (white) from the appearance(in a setting of the widget), the color of the theme(background of pie) and color of legend is same as we switched the theme from dark to light, Other HTML element automatically changes color from white to black
so my question is how to handle this ? OR
is there any way to get a selected theme color of the widget and using that we can handle color with the help of fontColor property of legend?
or any alternative?
---
### Author:  [@khushi](https://community.cumulocity.com/u/khushi)
#### Post date: [November 18, 2020, 9:06am UTC](https://community.cumulocity.com/t/how-to-use-existing-cumulocity-widgets-pie-chart-as-part-of-custom-widget/1209/6 "2020-11-18T09:06:47Z")
Try without setting the font color of legend. The chart widgets that I have created automatically changes the legend color on change of theme and I haven’t set any font color for the legend.
I don’t think that there is a way to get a selected theme color of the widget.
---
### Author:  [@kiranpokharkar](https://community.cumulocity.com/u/kiranpokharkar)
#### Post date: [November 23, 2020, 4:28am UTC](https://community.cumulocity.com/t/how-to-use-existing-cumulocity-widgets-pie-chart-as-part-of-custom-widget/1209/7 "2020-11-23T04:28:28Z")
Thanks for your suggestion @khushi
I already tried without setting the legend color but it does not work for me.
Are you using the ng2-chart library from angular?
if yes, then please try to switch the theme between light, dark, and branded.
---
### Author:  [@khushi](https://community.cumulocity.com/u/khushi)
#### Post date: [November 30, 2020, 9:45am UTC](https://community.cumulocity.com/t/how-to-use-existing-cumulocity-widgets-pie-chart-as-part-of-custom-widget/1209/8 "2020-11-30T09:45:05Z")
Hi Kiran, I am using ng2-chart version 2.2.3. I have not set any color for legend and when I switch from light to dark theme it changes the legend color from black to grey.
Not sure, why it is not working in your case.
---
### Author:  [@kiranpokharkar](https://community.cumulocity.com/u/kiranpokharkar)
#### Post date: [December 2, 2020, 11:40am UTC](https://community.cumulocity.com/t/how-to-use-existing-cumulocity-widgets-pie-chart-as-part-of-custom-widget/1209/10 "2020-12-02T11:40:03Z")
Hi Khushi,
it is working the same for me if I am not set any color to labels, but in a branched theme (blue), labels are almost not readable
---
### Author:  [@system](https://community.cumulocity.com/u/system)
#### Post date: [April 2, 2021, 3:45pm UTC](https://community.cumulocity.com/t/how-to-use-existing-cumulocity-widgets-pie-chart-as-part-of-custom-widget/1209/11 "2021-04-02T15:45:19Z")