PieChart Component synced with Web Awesome 3.4.x

Overview

Import

Import the pieChart directive from the angular-awesome package:

// Import the pieChart directive
import { WaPieChartDirective } from 'angular-awesome/pie-chart';

Examples

# WaPieChartDirective Usage Examples

Basic Usage

<wa-pie-chart label="Pie Chart">
  <script type="application/json">
  {
    "data": {
      "labels": ["Jan", "Feb", "Mar", "Apr", "May"],
      "datasets": [{
        "label": "Sales",
        "data": [65, 59, 80, 81, 56]
      }]
    }
  }
  </script>
</wa-pie-chart>

With Angular Bindings

<wa-pie-chart
  [label]="chartLabel"
  [config]="chartConfig"
  [withoutAnimation]="true"
  legendPosition="bottom">
</wa-pie-chart>

Custom Styling

<wa-pie-chart
  label="Styled Chart"
  [fillColor1]="'rgba(59, 130, 246, 0.5)'"
  [borderColor1]="'rgb(59, 130, 246)'"
  [config]="chartConfig">
</wa-pie-chart>

API Reference

Styling