How to use existing cumulocity widgets(pie chart) as part of custom widget

,
1

I wanted to show a pie chart widget which is already provided by cumuloicty in custom widget
how to reuse it ?

2

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 - SoftwareAG/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.

I hope this helps

3

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?

4

We can change the legend color manually by the setting the font Color in charts option.

For example:

options: {
        legend: {
            display: true,
            labels: {
                fontColor: 'rgb(255, 99, 132)'
            }
        }
    }

The color can be set manually in the widget configuration.

5

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?

6

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.

7

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.

8

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.

image
image

Not sure, why it is not working in your case.

10

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