CODEWITHSUNDEEP
d3.jssapui5
Ihsahs
Ihsahs

Reputation: 902

Add Custom Color to pie-chart

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");

enter image description here

Upvotes: 1

Views: 2837

Answers (2)

Jasper_07
Jasper_07

Reputation: 2473

the simple answer

plotArea : {
  'colorPalette' : ["red","green","orange","blue"]
},

see jsBin example

Colours in Pie

Upvotes: 4

Ihsahs
Ihsahs

Reputation: 902

There are 2 ways change the color:

1: @Jasper_07 answer

2: Add this piece of code

 var pieType = new sap.viz.ui5.types.Pie();
 pieType.setColorPalette(['#AAFFAA','#00FF00','#00AAAA','#FF0000']);   
 oBarChart.setPlotArea(pieType);

Upvotes: 1

Related Questions