Pie chart

author(s): Torstein Hønsi

by Sascha

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>


<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Pie charts are very popular for showing a compact overview of a
        composition or comparison. While they can be harder to read than
        column charts, they remain a popular choice for small datasets.
    </p>
</figure>

CSS

.highcharts-figure, .highcharts-data-table table {
    min-width: 320px; 
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}


input[type="number"] {
	min-width: 50px;
}

JavaScript

Highcharts.chart('container', {
  
  "chart": {
    "type": "pie"
  },
 
  "xAxis": {
    "gridLineColor": "#707073",
    "labels": {
      "style": {
        "color": "#E0E0E3"
      },
      "autoRotation": [-10, -20, -30, -40, -50, -60, -70, -80, -90]
    },
    "lineColor": "#707073",
    "minorGridLineColor": "#505053",
    "tickColor": "#707073",
    "title": {
      "style": {
        "color": "#A0A0A3"
      },
      "text": null
    },
    "tickmarkPlacement": "on",
    "visible": true,
    "categories": ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "13:00", "14:00", "15:00", "16:00"]
  },
  "yAxis": [{
    "labels": {
      "style": {
        "color": "#E0E0E3"
      }
    },
    "gridLineColor": "#707073",
    "lineColor": "#707073",
    "minorGridLineColor": "#505053",
    "tickColor": "#707073",
    "tickWidth": 1,
    "title": {
      "style": {
        "color": "#A0A0A3"
      },
      "text": null
    },
    "visible": true,
    "reversedStacks": false
  }],
  "labels": {
    "style": {
      "color": "#707073"
    }
  },
  "drilldown": {
    "activeAxisLabelStyle": {
      "color": "#F0F0F3"
    },
    "activeDataLabelStyle": {
      "color": "#F0F0F3"
    }
  },
  "navigation": {
    "buttonOptions": {
      "symbolStroke": "#DDD",
      "theme": {
        "fill": "#505053"
      }
    }
  },
  "rangeSelector": {
    "inputBoxBorderColor": "#505053",
    "inputStyle": {
      "backgroundColor": "#333",
      "color": "#C0C0C0"
    },
    "labelStyle": {
      "color": "#C0C0C0"
    },
    "buttonTheme": {
      "fill": "#505053",
      "stroke": "#000",
      "style": {
        "color": "#CCC"
      },
      "states": {
        "hover": {
          "fill": "#707073",
          "stroke": "#000",
          "style": {
            "color": "#FFF"
          }
        },
        "select": {
          "fill": "#000003",
          "stroke": "#000",
          "style": {
            "color": "#FFF"
          }
       ...