Pie chart

A pie chart shows a circle divided into different sized segments that represent different categories.


The pie chart has three axes:

  • "category" - identity of the different segments.
  • "value" - value used to determine the angle of each segment.
  • "color" - color of each segment.

Category defaults to column 0, value to column 1, and color is optional.

Object Property Description
options dataLabels

Indicates what lable shouls be shown on the pie chart segments.

  • none – show no labels
  • value – show the segment values
  • percent – show the segment percent
  • category – show the catetgory

If dataLabels is anything other than category, a legend is shown which list the categories and the colors used to represent them.

category axis column

The column that holds the name of the categories. Defaults to 0.

value axis column

The column from which values are to be read. Defaults to 1.

color axis column The column that holds the colors for the segments. Default is to use standard colors.


If you use dataLabels, the default jqplot rendering (grey) might get lost. You can change the color by setting CSS.

.jqplot-pie-series.jqplot-data-label {
color: #FFFFFF;


Consider the following table, which analyses the consumption of different types of pie.

Pie Consumption Color
Chicken 14 #CC6600
Steak & Kidney 21 #660000
Steak 38 #CC0000

This can be represented in JSON.

    "columns": [
            "name": "Pie",
            "reference": "pie"
            "name": "Consumption",
            "reference": "consumption",
            "name": "Color",
            "reference": "color"
    "rows": [
            "pie": "Chicken",
            "consumption": 14,
            "color": "#CC6600"
            "pie": "Steak & Kidney",
            "consumption": 21,
            "color": "#660000"
            "pie": "Steak",
            "consumption": 38,
            "color": "#CC0000"

This demonstrates the default options.

The segments are not labelled. Default colors are used. There is a legend connecting the segment colors with the categories.

"options": {

The third colum (i.e. column 2) is used for colors. Segments are labelled with percentages and the legend is shown.

This option has also used the CSS above to color the data labels white.

"options": {

Colors are based on the categories, and translated into real colors using the options.colors lookup.

Segments are labelled with the category. The legend is not shown because the categories are shown on the segments.

"options": { "
"colors": {
"Chicken": "yellow" ,
"Steak": "red",
"Steak & Kidney": "brown"