Pie Charts

  • Methods
  • cx
  • cy
  • drawPaths
  • emptyTitle
  • externalLabels
  • externalRadiusPadding
  • innerRadius
  • minAngleForLabel
  • radius
  • slicesCap
  • Type
  • Number
  • Number
  • Boolean
  • String
  • Number
  • Number
  • Number
  • Number
  • Number
  • Number
  • Default
  • -
  • -
  • -
  • -
  • -
  • 0
  • 0
  • 0.5
  • -
  • -
  • Method Descriptions
  • set center x coordinate position
  • set center y coordinate position
  • set whether to draw lines from pie slices to their labels
  • Title to use for the only slice when there is no data
  • Position slice labels offset from the outer edge of the chart
  • set external radius padding of the pie chart. Will force radius of the pie chart to become smaller/larger
  • set inner radius of the pie chart. If inner radius > 0px, then pie chart will be rendered as a doughnut chart
  • set minimal slice angle for label rendering. Any slice with a smaller angle will not display a slice label.
  • set outer radius. If the radius is not set, it will be half of the minimum of the chart width and height
  • set max number of slices the pie chart will generate. The top slices are determined by value from high to low.
dc.pieChart('#pie01')
          .dimension(petDimension)
          .group(petGroup)
          .width(350)
          .height(300)
          .radius(75);


        
dc.pieChart('#pie02')
          .dimension(petDimension)
          .group(petGroup)
          .width(350)
          .height(300)
          .radius(75)
          .externalLabels(30)
          .drawPaths(false);
        
dc.pieChart('#pie03')
          .dimension(petDimension)
          .group(petGroup)
          .width(350)
          .height(300)
          .radius(75)
          .externalLabels(30)
          .drawPaths(true);
        
dc.pieChart('#pie04')
          .dimension(petDimension)
          .group(petGroup)
          .width(350)
          .height(300)
          .radius(75)
          .externalRadiusPadding(20);

        
dc.pieChart('#pie06')
          .dimension(petDimension)
          .group(petGroup)
          .width(350)
          .height(300)
          .radius(75)
          .minAngleForLabel(2);

        
dc.pieChart('#pie07')
          .dimension(petDimension)
          .group(petGroup)
          .width(350)
          .height(300)
          .radius(75)
          .slicesCap(2);





        
dc.pieChart('#pie08')
          .dimension(petDimension)
          .group(petGroup)
          .width(350)
          .height(300)
          .radius(75)
          .slicesCap(2)
          .othersLabel('Other Animals')
          .ordinalColors(['red', 'green', 'blue']);



        
dc.pieChart('#pie09')
                .dimension(petDimension)
                .group(petGroup)
                .width(350)
                .height(300)
                .radius(75)
                .renderLabel(false)
                .legend(dc.legend()
                  .x(20)
                  .y(30)
                  .itemHeight(12)
                  .gap(10));
        
dc.pieChart('#donut01')
          .dimension(petDimension)
          .group(petGroup)
          .width(350)
          .height(300)
          .radius(100)
          .innerRadius(20)
          .on('renderlet', function (chart) {
              chart
                  .selectAll('text.pie-slice')
                  .text(function (d) {
                      return d.data.key + ' ' + 
                      dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2 * Math.PI) * 100) + '%';
                  });
          });
        

                    dc.pieChart('#donut02')
                      .dimension(petDimension)
                      .group(petGroup)
                      .width($(donut02.anchor()).parent().width())
                      .height(300)
                      .radius(100)
                      .innerRadius(60)
                      .on('renderlet', function (chart) {
                        // get the number of cats selected
                        let pieSlice;
                        chart.data().forEach(function(d){if(d.key == "Cat") pieSlice = d.value;});
                        // create an extra text Element if it does not exist
                        if(d3.select('#circle-value').empty()){
                          let g = d3.selectAll('#donut02 .pie-slice-group')
                                    .append("text")
                                    .attr('text-anchor', 'middle')
                                    .attr('y', 5)
                                    .attr('id', 'circle-value');
                        };
                        // set value to number of cats
                        d3.select('#circle-value').text(pieSlice + ' Cats Selected');

                        // add percentages to pie slices
                        chart
                            .selectAll('text.pie-slice')
                            .text(function (d) {
                              let value = Math.round((d.endAngle - d.startAngle) / (2 * Math.PI) * 100)
                              return dc.utils.printSingleValue(value) + '%';
                            });
                      });