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.
brown: 7black: 4brownblack
dc.pieChart('#pie01')
.dimension(petDimension)
.group(petGroup)
.width(350)
.height(300)
.radius(75);
Cat: 5Dog: 3Bear: 2Deer: 1CatDogBearDeer
dc.pieChart('#pie02')
.dimension(petDimension)
.group(petGroup)
.width(350)
.height(300)
.radius(75)
.externalLabels(30)
.drawPaths(false);
Cat: 5Dog: 3Bear: 2Deer: 1CatDogBearDeer
dc.pieChart('#pie03')
.dimension(petDimension)
.group(petGroup)
.width(350)
.height(300)
.radius(75)
.externalLabels(30)
.drawPaths(true);
Cat: 5Dog: 3Bear: 2Deer: 1CatDogBearDeer
dc.pieChart('#pie04')
.dimension(petDimension)
.group(petGroup)
.width(350)
.height(300)
.radius(75)
.externalRadiusPadding(20);
Cat: 5Dog: 3Bear: 2Deer: 1Cat
dc.pieChart('#pie06')
.dimension(petDimension)
.group(petGroup)
.width(350)
.height(300)
.radius(75)
.minAngleForLabel(2);
Cat: 5Dog: 3Others: 3CatDogOthers
dc.pieChart('#pie07')
.dimension(petDimension)
.group(petGroup)
.width(350)
.height(300)
.radius(75)
.slicesCap(2);
Cat: 5Dog: 3Other Animals: 3CatDogOther Animals
dc.pieChart('#pie08')
.dimension(petDimension)
.group(petGroup)
.width(350)
.height(300)
.radius(75)
.slicesCap(2)
.othersLabel('Other Animals')
.ordinalColors(['red', 'green', 'blue']);
brown: 7black: 4brownblack
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));
Cat: 5Dog: 3Bear: 2Deer: 1Cat 45%Dog 27%Bear 18%Deer 9%
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) + '%';
        });
});
Cat: 5Dog: 3Bear: 2Deer: 15 Cats Selected45%27%18%9%

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) + '%';
        });
  });