amchart generating a pie chart, need different colors and labels to be set inside the slices

Question

I am using amcharts, for generating a pie chart with the label inside. I tried many attempts but it didn't come properly. Here is my fiddle

 AmCharts.makeChart("chart4", {
           "type": "pie",
           "theme": "light",
           "labelRadius": -35,
           "labelText": "[[percents]]%",           
           "dataProvider": [ {
             "country": "Used Space",           
             "fillColor":"#0000ff",
             "litres": 84
           },
           {
           "country": "Free Space",        
            "color":"#33cc33",
             "litres": 16
             }],
           "valueField": "litres",
           "titleField": "country",
           "outlineAlpha": 0.4,
           "depth3D": 12,
           "outerRadius":35,
           "angle": 40,
           "labelsEnabled": false,
           "autoMargins": false,
  "marginTop": 0,
  "marginBottom": 0,
  "marginLeft": 8,
  "marginRight": 8,
  "pullOutRadius": 0,

            "balloon":{
            "fixedPosition":true
           },
           "export": {
             "enabled": true,
            menu:[]
           }
         } );



         // generate some random data, quite different range
         function generateChartData() {
             var chartData = [];

            chartData = [{"date" : "09/11/2018 0:00", "diskSpaceUsage" : "84"},{"date" : "09/11/2018 1:00", "diskSpaceUsage" : "84"},{"date" : "09/11/2018 2:00", "diskSpaceUsage" : "84"},{"date" : "09/11/2018 3:00", "diskSpaceUsage" : "84"},{"date" : "09/11/2018 4:00", "diskSpaceUsage" : "84"},{"date" : "09/11/2018 5:00", "diskSpaceUsage" : "84"},{"date" : "09/11/2018 6:00", "diskSpaceUsage" : "84"},{"date" : "09/11/2018 7:00", "diskSpaceUsage" : "84"},{"date" : "09/11/2018 8:00", "diskSpaceUsage" : "83.75"},
            {"date" : "09/11/2018 9:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 10:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 11:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 12:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 13:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 14:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 15:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 16:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 17:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 18:00", "diskSpaceUsage" : "83"},
            {"date" : "09/11/2018 19:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 20:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 21:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 22:00", "diskSpaceUsage" : "83.5"},{"date" : "09/11/2018 23:00", "diskSpaceUsage" : "84"},
            {"date" : "09/12/2018 0:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 1:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 2:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 3:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 4:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 5:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 6:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 7:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 8:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 9:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 10:00", "diskSpaceUsage" : "84"}];


             return chartData;
         }

I need to set the colors for both the parts, and the labels should be displayed inside the slices. Any suggestions would be highly appreciated !

user_5090771 · Answer

to change the slice colors, use option colors

"colors": ['red', 'green'],

to display slice labels, set option labelsEnabled to true

"labelsEnabled": true,

see following working snippet...

AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "colors": ['red', 'green'],
  "labelRadius": -35,
  "labelText": "[[percents]]%",     
  "dataProvider": [ {
    "country": "Used Space",   
    "litres": 84
  },
 {
   "country": "Free Space",     
    "litres": 16
  }],
  "valueField": "litres",
  "titleField": "country",
  "outlineAlpha": 0.4,
  "depth3D": 12,
  "outerRadius":35,
  "angle": 40,
  "labelsEnabled": true,
  "autoMargins": false,
  "marginTop": 0,
  "marginBottom": 0,
  "marginLeft": 8,
  "marginRight": 8,
  "pullOutRadius": 0,

  "balloon":{
    "fixedPosition":true
  },
  "export": {
    "enabled": true,
    menu:[]
  }
} );

#chartdiv {
  width: 100%;
  height: 500px;
}

user_6106614 · Answer

You can either set the colors array like @WhiteHat mentioned, or if you want to specify a color for specific slices like what your code seems to be attempting to do, use colorField and have the field name match the property in your data. You can also set a labelColorField if you want to change the label color:

AmCharts.makeChart("chartdiv", {
  // ...
  colorField: "color", //property containing your color in your data
  labelColorField: "labelColor",
  dataProvider: [{
    "country": "Used Space",            
    "color": "#0000ff", //color pulled from here
    "labelColor": "#efefef",
    "litres": 84
  },
    {
    "country": "Free Space",        
    "color": "#33cc33",   
    "labelColor": "#efefef",
    "litres": 16
  }],
  // ...
});

Like @WhiteHat said, you need to enable labels by setting labelsEnabled to true. You also need to tweak labelRadius even further and use a larger negative value to move it further inside if needed.

AmCharts.makeChart("chartdiv", {
  // ...
  labelsEnabled: true,
  labelRadius: -150,
  // ...
});

Demo:

AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "colorField": "color",
  "labelColorField": "labelColor",
  "labelRadius": -150,
  "labelsEnabled": true,
  "labelText": "[[percents]]%",
  "dataProvider": [{
      "country": "Used Space",
      "color": "#0000ff", //color pulled from here
      "labelColor": "#efefef",
      "litres": 84
    },
    {
      "country": "Free Space",
      "color": "#33cc33",
      "labelColor": "#efefef",
      "litres": 16
    }
  ],
  "valueField": "litres",
  "titleField": "country",
  "outlineAlpha": 0.4,
  "depth3D": 12,
  "outerRadius": 35,
  "angle": 40,
  "autoMargins": false,
  "marginTop": 0,
  "marginBottom": 0,
  "marginLeft": 8,
  "marginRight": 8,
  "pullOutRadius": 0,

  "balloon": {
    "fixedPosition": true
  },
  "export": {
    "enabled": true,
    menu: []
  }
});

#chartdiv {
  width: 100%;
  height: 500px;
}

amchart generating a pie chart, need different colors and labels to be set inside the slices

2 Answers