Add Custom Color to pie-chart

[Former Member]

I have requirement to add specific color to each element in pie-chart.

Below is my code for pie-chart with static json.

Instead of the default colors given by the viz charts, I want to have red, green, orange and blue color in the pie-chart.

Has someone changed the colors successfully?

var oModel = new sap.ui.model.json.JSONModel({

     businessData : [

               {Country :"Canada",revenue:2410.87, color: "red"},

                {Country :"China",revenue:638.29, color: "green"},

                {Country :"France",revenue:487.66, color: "orange"},

                {Country :"Germany",revenue:170.23, color: "blue"}

       ]

});

var oDataset = new sap.viz.ui5.data.FlattenedDataset({

         dimensions : [ {axis : 1, name : 'Country',  value : "{Country}" } ],

         measures : [ { name : 'Revenue',  value : '{revenue}' } ],

         data : { path : "/businessData" }

      });

var oBarChart = new sap.viz.ui5.Pie({

          width : "80%", height : "400px",

          plotArea : {

                   'colorPalette' : d3.scale.category20().range()

                },

           title : { visible : true, text : 'Revenue By Country' },

           dataset : oDataset

     });

oBarChart.setModel(oModel);

oBarChart.placeAt("sample1");

Thanks,

Shashi

[Former Member · Accepted solution]

After lot of permutation and combination, I figured it out how to change the color.

Changing colorPalette to 'colorPalette' : ['#00B050','#CCFF66','#FF0000','#FFC300'], it worked

var oBarChart = new sap.viz.ui5.Pie({

          width : "80%", height : "400px",

          plotArea : {

                   'colorPalette' : ['#00B050','#CCFF66','#FF0000','#FFC300']

                },

           title : { visible : true, text : 'Revenue By Country' },

           dataset : oDataset

     });

[tejashwini123 · Accepted solution]

how to add colorPalette' in XML code?

<viz:VizFrame xmlns="sap.viz" id="idDonutChart" class="graphs donutChart" vizType="donut" vizProperties="{plotArea: { drawingEffect: 'glossy' },title:{ text:'Testing'}, dataLabel:{visible:true, hideWhenOverlap:true}, colorPalette : ['#00B050','#CCFF66','#FF0000','#FFC300']}">

[Pranav_P_A · Accepted solution]

@tejashwini123You can achieve that like so
```
<viz:VizFrame
    vizType='pie'
    vizProperties="{
        plotArea: {
            'colorPalette': ['#098000', '#FF0000', ...]
        }
    }"
>
    ...
</viz:VizFram>

```