# Pie Chart

### Table of contents
<ol>
  <li>
    <a href="#installation">Installation</a>
  </li>
  <li>
    <a href="#usage">Usage</a>
  </li>
  <li>
    <a href="#properties">Properties</a>
  </li>
</ol>

### Installation
#### NPM
```javascript
npm i @ppci/stacked-column-chart

// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs
```

### Usage
#### Javascript
```javascript
import '@ppci/stacked-column-chart'
```

#### Browser
```html
<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/stacked-column-chart/builds/index.min.js" />

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/stacked-column-chart/builds/legacy.min.js" />

<!-- Component -->
<stacked-column-chart
  .data=${Array}
  .series=${Array}
></stacked-column-chart>
```

### Properties
<table width="100%">
  <thead>
    <tr>
      <td>Property</td>
      <td>Type</td>
      <td>Description</td>
      <td>Possible Values</td>
    </tr>
  </thead>
  <tr>
    <td>*data*</td>
    <td>Array</td>
    <td>Chart data list</td>
    <td>
    ```html
    [
      {
        name: '1',
        values: {
          social: 100,
          local: 100,
        },
      },
      {
        name: '2',
        values: {
          social: 200,
          local: 50,
        },
      },
    ]
    ```
    </td>
  </tr>
  <tr>
    <td>*series*</td>
    <td>Array</td>
    <td>Serie settings</td>
    <td>
    ```html
    [
      {
        name: 'social',
        label: 'Social',
        color: '#ffffff',
      },
      {
        name: 'local',
        label: 'Local',
        color: '#ffffff',
      },
    ]
    ```
    </td>
  </tr>
  <tr>
    <td>legendReverse</td>
    <td>Bool</td>
    <td>Reverse the order of the legend labels</td>
    <td>
    ```
    false | true
    ```
    </td>
  </tr>
</table>