@ppci/stacked-column-chart

Pie Chart

Table of contents

1. Installation
2. Usage
3. Properties

Installation

NPM

npm i @ppci/stacked-column-chart

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

Usage

Javascript

import '@ppci/stacked-column-chart'

Browser

<!-- 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

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