Pie and Donut Charts

Create pie and donut charts to visualize proportional data and part-to-whole relationships

Pie charts are circular graphics divided into slices to illustrate numerical proportions. Donut charts are pie charts with a hollow center.

Pie Charts

A pie chart displays data as slices of a circle, where each slice represents a proportion of the whole.

Basic Pie Chart

Simple Pie

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: 'Market Share'
  },
  series: [{
    name: 'Share',
    data: [
      { name: 'Chrome', y: 61.41 },
      { name: 'Internet Explorer', y: 11.84 },
      { name: 'Firefox', y: 10.85 },
      { name: 'Edge', y: 4.67 },
      { name: 'Safari', y: 4.18 },
      { name: 'Other', y: 7.05 }
    ]
  }]
});

Pie Chart Configuration

Key configuration options from ~/workspace/source/ts/Series/Pie/PieSeriesDefaults.ts:52-641:

center · array · default: "[null, null]"

The center of the pie chart relative to the plot area. Can be percentages or pixel values.

plotOptions: {
  pie: {
    center: ['50%', '50%'] // Center the pie
  }
}

size · number | string · default: "null"

The diameter of the pie relative to the plot area. Can be a percentage or pixel value.

plotOptions: {
  pie: {
    size: '75%' // 75% of plot area
  }
}

innerSize · number | string · default: "0"

The size of the inner diameter for the pie. A size greater than 0 renders a donut chart.

plotOptions: {
  pie: {
    innerSize: '50%' // Creates a donut chart
  }
}

startAngle · number · default: "0"

The start angle of the pie slices in degrees where 0 is top and 90 is right.

plotOptions: {
  pie: {
    startAngle: -90 // Start from top
  }
}

endAngle · number

The end angle of the pie in degrees. Defaults to startAngle plus 360.

plotOptions: {
  pie: {
    startAngle: 0,
    endAngle: 180 // Semi-circle
  }
}

slicedOffset · number · default: "10"

If a point is sliced, how many pixels should it be moved from the center.

borderRadius · number | string · default: "3"

The corner radius of the border surrounding each slice.

ignoreHiddenPoint · boolean · default: "true"

Whether to redraw the pie as if hidden points were null.

Data Labels

Pie charts have extensive data label options:

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  plotOptions: {
    pie: {
      dataLabels: {
        enabled: true,
        distance: 30,
        format: '{point.name}: {point.percentage:.1f}%',
        connectorColor: 'silver',
        connectorWidth: 1,
        connectorShape: 'crookedLine'
      }
    }
  },
  series: [{
    data: [29, 71, 106, 129, 144, 176]
  }]
});

Data Label Alignment

Control how data labels align:

dataLabels: {
  alignTo: 'connectors', // or 'plotEdges'
  distance: 30,
  connectorPadding: 5
}

Connector Shape

Choose from built-in connector shapes:

• 'crookedLine' (default)
• 'fixedOffset'
• 'straight'

dataLabels: {
  connectorShape: 'straight',
  connectorWidth: 2
}

Custom Formatter

dataLabels: {
  formatter: function() {
    return this.point.name + ': ' + this.y;
  }
}

Donut Charts

Donut charts are pie charts with a hollow center, created by setting innerSize.

Basic Donut Chart

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: 'Browser Market Share',
    align: 'center'
  },
  plotOptions: {
    pie: {
      innerSize: '60%',
      depth: 45
    }
  },
  series: [{
    name: 'Share',
    data: [
      ['Chrome', 61.41],
      ['Internet Explorer', 11.84],
      ['Firefox', 10.85],
      ['Edge', 4.67],
      ['Safari', 4.18],
      ['Other', 7.05]
    ]
  }]
});

Donut with Custom Center Text

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    events: {
      load: function() {
        const chart = this;
        chart.renderer.text('Total<br/>1000', 100, 120)
          .css({
            fontSize: '20px',
            textAlign: 'center'
          })
          .add();
      }
    }
  },
  plotOptions: {
    pie: {
      innerSize: '70%'
    }
  },
  series: [{
    data: [400, 300, 200, 100]
  }]
});

Semi-Circle Donut

Create a gauge-like visualization:

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  plotOptions: {
    pie: {
      startAngle: -90,
      endAngle: 90,
      innerSize: '50%',
      center: ['50%', '75%']
    }
  },
  series: [{
    data: [
      ['Low', 30],
      ['Medium', 40],
      ['High', 30]
    ]
  }]
});

Variable Pie

Variable pie charts allow each slice to have a different radius based on a z-value:

Highcharts.chart('container', {
  chart: {
    type: 'variablepie'
  },
  series: [{
    minPointSize: 10,
    innerSize: '20%',
    zMin: 0,
    data: [{
      name: 'Chrome',
      y: 61.41,
      z: 100
    }, {
      name: 'Firefox',
      y: 10.85,
      z: 50
    }, {
      name: 'Safari',
      y: 4.18,
      z: 30
    }]
  }]
});

Styling and Colors

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  plotOptions: {
    pie: {
      colors: ['#4CAF50', '#2196F3', '#FFC107', '#F44336', '#9C27B0'],
      borderWidth: 2,
      borderColor: '#FFFFFF',
      states: {
        hover: {
          brightness: 0.1
        }
      }
    }
  },
  series: [{
    data: [29, 71, 106, 129, 144]
  }]
});

Use Cases

Pie Charts

• Showing market share
• Budget allocation
• Survey results
• Composition of a whole

Donut Charts

• Multiple data series
• Emphasizing total value
• Cleaner appearance
• Adding center labels

Data Formats

Pie charts support two main data formats:

1. Array of numbers: data: [29, 71, 106, 129]
2. Array of objects: data: [{name: 'Chrome', y: 61.41}, {name: 'Firefox', y: 10.85}]

Pie charts are not suitable for comparing more than 5-7 slices, as they become hard to read.

Pie charts always use colorByPoint: true by default, giving each slice a different color.