Pie Plot

var scale = new Plottable.Scales.Linear();
var colorScale = new Plottable.Scales.InterpolatedColor();
colorScale.range(["#BDCEF0", "#5279C7"]);
var data = [{ val: 1 }, { val: 2 }, { val: 3 },
            { val: 4 }, { val: 5 }, { val: 6 }];

var plot = new Plottable.Plots.Pie()
  .addDataset(new Plottable.Dataset(data))
  .sectorValue(function(d) { return d.val; }, scale)
  .attr("fill", function(d) { return d.val; }, colorScale)
  .renderTo("svg#example");

window.addEventListener("resize", function() {
  plot.redraw();
});

Inherits from Plots.Plot

Public Methods

• .entitiesAt(point)

  Gets the Entities at a particular point.

• .innerRadius()/.innerRadius(innerRadius)/.innerRadius(innerRadius, scale)

  Gets/sets the inner radius for the current plot. The parameter innerRadius can be a number or the result of an Accessor which returns a number. If the parameter scale is provided, results will be scaled.

  var scale = new Plottable.Scales.Linear();
  var colorScale = new Plottable.Scales.InterpolatedColor();
  colorScale.range(["#BDCEF0", "#5279C7"]);
  var data = [{ val: 1 }, { val: 2 }, { val: 3 },
              { val: 4 }, { val: 5 }, { val: 6 }];
  
  var plot = new Plottable.Plots.Pie()
    .addDataset(new Plottable.Dataset(data))
    .sectorValue(function(d) { return d.val; }, scale)
    .innerRadius(90)
    .attr("fill", function(d) { return d.val; }, colorScale)
    .renderTo("svg#innerradius");
  

• .labelsEnabled()/.labelsEnabled(labelsEnabled)

  Gets/sets whether labels are enabled for the current plot. If a slice is too small for a label to be shown, it will automatically be hidden.

  var scale = new Plottable.Scales.Linear();
  var colorScale = new Plottable.Scales.InterpolatedColor();
  colorScale.range(["#BDCEF0", "#5279C7"]);
  var data = [2, 4, 6, 8, 10, 20];
  
  var plot = new Plottable.Plots.Pie()
    .addDataset(new Plottable.Dataset(data))
    .sectorValue(function(d) { return d; }, scale)
    .attr("fill", function(d) { return d; }, colorScale)
    .labelsEnabled(true)
    .renderTo("svg#labelsenabled");
  

• .outerRadius()/.outerRadius(outerRadius)/.outerRadius(outerRadius, scale)

  Gets/sets the outer radius for the current plot. The parameter outerRadius can be a number or the result of an Accessor which returns a number. If the parameter scale is provided, results will be scaled.

  var scale = new Plottable.Scales.Linear();
  var colorScale = new Plottable.Scales.InterpolatedColor();
  colorScale.range(["#BDCEF0", "#5279C7"]);
  var data = [{ val: 1 }, { val: 2 }, { val: 3 },
              { val: 4 }, { val: 5 }, { val: 6 }];
  
  var plot = new Plottable.Plots.Pie()
    .addDataset(new Plottable.Dataset(data))
    .sectorValue(function(d) { return d.val; }, scale)
    .outerRadius(90)
    .attr("fill", function(d) { return d.val; }, colorScale)
    .renderTo("svg#outerradius");
  

• .sectorValue()/.sectorValue(sectorValue)/.sectorValue(sectorValue, scale)

  Gets/sets the sector value for the current plot. The parameter sectorValue can be a number or the result of an Accessor which returns a number. If the parameter scale is provided, results will be scaled.