# chart-pie

The markup of every demo on <https://kuiper.oeds.it/chart-pie/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## pie

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-pie-base" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-pie-base')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   series: [Object.assign({ type: 'pie', radius: '70%', data: [{ value: 4820, name: 'gmail' }, { value: 3140, name: 'outlook' }, { value: 1960, name: 'libero' }, { value: 1275, name: 'yahoo' }, { value: 940, name: 'icloud' }, { value: 610, name: 'other' }], label: Object.assign({ position: 'outer', formatter: '{b}\n{c}\n{d}%', alignTo: 'edge', edgeDistance: 0, minMargin: 10, bleedMargin: 0, distanceToLabelLine: 5, lineHeight: 18, color: 'inherit' }, k.value), labelLine: { show: true, length: 15, length2: 0, maxSurfaceAngle: 90 } }, k.mute)]
  });
 })();
 </script>
</div>
```

## pie donut

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-pie-donut" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-pie-donut')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   series: [Object.assign({ type: 'pie', radius: ['45%', '70%'], data: [{ value: 4820, name: 'gmail' }, { value: 3140, name: 'outlook' }, { value: 1960, name: 'libero' }, { value: 1275, name: 'yahoo' }, { value: 940, name: 'icloud' }, { value: 610, name: 'other' }], label: Object.assign({ position: 'outer', formatter: '{b}\n{c}\n{d}%', alignTo: 'edge', edgeDistance: 0, minMargin: 10, bleedMargin: 0, distanceToLabelLine: 5, lineHeight: 18, color: 'inherit' }, k.value), labelLine: { show: true, length: 15, length2: 0, maxSurfaceAngle: 90 } }, k.mute)]
  });
 })();
 </script>
</div>
```

## pie rose area

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-pie-rosea" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-pie-rosea')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   series: [Object.assign({ type: 'pie', roseType: 'area', radius: ['20%', '70%'], data: [{ value: 4820, name: 'gmail' }, { value: 3140, name: 'outlook' }, { value: 1960, name: 'libero' }, { value: 1275, name: 'yahoo' }, { value: 940, name: 'icloud' }, { value: 610, name: 'other' }], label: Object.assign({ position: 'outer', formatter: '{b}\n{c}\n{d}%', alignTo: 'edge', edgeDistance: 0, minMargin: 10, bleedMargin: 0, distanceToLabelLine: 5, lineHeight: 18, color: 'inherit' }, k.value), labelLine: { show: true, length: 15, length2: 0, maxSurfaceAngle: 90 } }, k.mute)]
  });
 })();
 </script>
</div>
```

## pie rose radius

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-pie-roser" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-pie-roser')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   series: [Object.assign({ type: 'pie', roseType: 'radius', radius: ['20%', '70%'], data: [{ value: 4820, name: 'gmail' }, { value: 3140, name: 'outlook' }, { value: 1960, name: 'libero' }, { value: 1275, name: 'yahoo' }, { value: 940, name: 'icloud' }, { value: 610, name: 'other' }], label: Object.assign({ position: 'outer', formatter: '{b}\n{c}\n{d}%', alignTo: 'edge', edgeDistance: 0, minMargin: 10, bleedMargin: 0, distanceToLabelLine: 5, lineHeight: 18, color: 'inherit' }, k.value), labelLine: { show: true, length: 15, length2: 0, maxSurfaceAngle: 90 } }, k.mute)]
  });
 })();
 </script>
</div>
```

## pie half

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-pie-half" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-pie-half')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   series: [Object.assign({ type: 'pie', radius: ['45%', '70%'], startAngle: 180, endAngle: 360, center: ['50%', '80%'], data: [{ value: 4820, name: 'gmail' }, { value: 3140, name: 'outlook' }, { value: 1960, name: 'libero' }, { value: 1275, name: 'yahoo' }, { value: 940, name: 'icloud' }, { value: 610, name: 'other' }], label: Object.assign({ position: 'inside', formatter: '{d}%', color: 'inherit' }, k.value), labelLine: { show: false } }, k.mute)]
  });
 })();
 </script>
</div>
```

## pie labels inside

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-pie-inside" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-pie-inside')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   series: [Object.assign({ type: 'pie', radius: '70%', data: [{ value: 4820, name: 'gmail' }, { value: 3140, name: 'outlook' }, { value: 1960, name: 'libero' }, { value: 1275, name: 'yahoo' }, { value: 940, name: 'icloud' }, { value: 610, name: 'other' }], label: Object.assign({ position: 'inside', formatter: '{d}%', color: 'inherit' }, k.value), labelLine: { show: false } }, k.mute)]
  });
 })();
 </script>
</div>
```

## pie pad angle

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-pie-pad" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-pie-pad')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   series: [Object.assign({ type: 'pie', radius: ['45%', '70%'], padAngle: 4, itemStyle: { borderRadius: 6 }, data: [{ value: 4820, name: 'gmail' }, { value: 3140, name: 'outlook' }, { value: 1960, name: 'libero' }, { value: 1275, name: 'yahoo' }, { value: 940, name: 'icloud' }, { value: 610, name: 'other' }], label: Object.assign({ position: 'outer', formatter: '{b}\n{c}\n{d}%', alignTo: 'edge', edgeDistance: 0, minMargin: 10, bleedMargin: 0, distanceToLabelLine: 5, lineHeight: 18, color: 'inherit' }, k.value), labelLine: { show: true, length: 15, length2: 0, maxSurfaceAngle: 90 } }, k.mute)]
  });
 })();
 </script>
</div>
```

## pie border

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-pie-border" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-pie-border')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   series: [Object.assign({ type: 'pie', radius: '70%', itemStyle: { borderColor: '#ffffff', borderWidth: 6 }, data: [{ value: 4820, name: 'gmail' }, { value: 3140, name: 'outlook' }, { value: 1960, name: 'libero' }, { value: 1275, name: 'yahoo' }, { value: 940, name: 'icloud' }, { value: 610, name: 'other' }], label: Object.assign({ position: 'outer', formatter: '{b}\n{c}\n{d}%', alignTo: 'edge', edgeDistance: 0, minMargin: 10, bleedMargin: 0, distanceToLabelLine: 5, lineHeight: 18, color: 'inherit' }, k.value), labelLine: { show: true, length: 15, length2: 0, maxSurfaceAngle: 90 } }, k.mute)]
  });
 })();
 </script>
</div>
```

## pie min angle

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-pie-min" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-pie-min')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   series: [Object.assign({ type: 'pie', radius: '70%', minAngle: 20, data: [{ value: 4820, name: 'gmail' }, { value: 60, name: 'outlook' }, { value: 40, name: 'libero' }, { value: 30, name: 'yahoo' }, { value: 20, name: 'icloud' }, { value: 10, name: 'other' }], label: Object.assign({ position: 'outer', formatter: '{b}\n{c}\n{d}%', alignTo: 'edge', edgeDistance: 0, minMargin: 10, bleedMargin: 0, distanceToLabelLine: 5, lineHeight: 18, color: 'inherit' }, k.value), labelLine: { show: true, length: 15, length2: 0, maxSurfaceAngle: 90 } }, k.mute)]
  });
 })();
 </script>
</div>
```

## pie nested

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-pie-nested" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-pie-nested')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   series: [Object.assign({ type: 'pie', radius: ['0%', '32%'], data: [{ value: 7960, name: 'mail' }, { value: 4785, name: 'web' }], label: Object.assign({ position: 'inside', formatter: '{d}%', color: 'inherit' }, k.value), labelLine: { show: false } }, k.mute), Object.assign({ type: 'pie', radius: ['45%', '70%'], data: [{ value: 4820, name: 'gmail' }, { value: 3140, name: 'outlook' }, { value: 1960, name: 'libero' }, { value: 1275, name: 'yahoo' }, { value: 940, name: 'icloud' }, { value: 610, name: 'other' }], label: { show: false }, labelLine: { show: false } }, k.mute)]
  });
 })();
 </script>
</div>
```

## pie two rings

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-pie-rings" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-pie-rings')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   series: [Object.assign({ type: 'pie', center: ['27%', '50%'], radius: '58%', data: [{ value: 4820, name: 'gmail' }, { value: 3140, name: 'outlook' }, { value: 1960, name: 'libero' }, { value: 1275, name: 'yahoo' }, { value: 940, name: 'icloud' }, { value: 610, name: 'other' }], label: Object.assign({ position: 'inside', formatter: '{d}%', color: 'inherit' }, k.value), labelLine: { show: false } }, k.mute), Object.assign({ type: 'pie', center: ['73%', '50%'], radius: ['30%', '58%'], data: [{ value: 4820, name: 'gmail' }, { value: 3140, name: 'outlook' }, { value: 1960, name: 'libero' }, { value: 1275, name: 'yahoo' }, { value: 940, name: 'icloud' }, { value: 610, name: 'other' }], label: Object.assign({ position: 'inside', formatter: '{d}%', color: 'inherit' }, k.value), labelLine: { show: false } }, k.mute)]
  });
 })();
 </script>
</div>
```

## pie gauge

```html
<div class="card">
 <canvas width="1920" height="1080"></canvas>
 <div id="chart-pie-gauge" class="position-cover"></div>
 <script>
 (function () {
  var k = kuiperChart.base();
  echarts.init(document.getElementById('chart-pie-gauge')).setOption({
   animation: false,
   color: k.palette,
   grid: { top: 24, left: 24, right: 24, bottom: 8, containLabel: true },
   series: [Object.assign({ type: 'pie', radius: ['58%', '80%'], startAngle: 200, endAngle: 340, center: ['50%', '72%'], data: [{ value: 72, name: 'used' }, { value: 28, name: 'free' }], label: Object.assign({ position: 'inside', formatter: '{d}%', color: 'inherit' }, k.value), labelLine: { show: false } }, k.mute)]
  });
 })();
 </script>
</div>
```
