Chart

Copy<piix-chart values="12,18,14,24,30,26,38,34,42,48,44,56"
  labels="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec" suffix="k"></piix-chart>

An area chart's fill fades out in a dither instead of a gradient, with the line on top in the brightest colour; bars are stepped columns shaded from the top. It sweeps in from the left the first time it's on screen. Hover it and a crosshair snaps to the nearest point and shows the label and value.

Installation

Copy<!-- once, anywhere on the page: every component -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>

Copy<!-- just chart (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/chart.min.js"></script>

Copynpm install piixpal

// once, in your entry file
import "piixpal";

Copy// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-chart values="12,18,14,24,30,26,38,34,42,48,44,56"
      labels="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec" suffix="k"></piix-chart>
  );
}

Usage

Copy<piix-chart values="12,18,14,24,30,26,38,34,42,48,44,56"
  labels="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec" suffix="k"></piix-chart>

Examples

Bars

Copy<piix-chart kind="bars" values="4,7,5,9,12,8,14" labels="Mon,Tue,Wed,Thu,Fri,Sat,Sun" palette="sunset"></piix-chart>

In a stat card

Copy<div class="ex-stat">
  <small>Revenue</small>
  <strong>$48.2k</strong>
  <piix-chart kind="line" values="3,4,4,6,5,8,9,8,11,13" height="70px" palette="ocean"></piix-chart>
</div>

API reference

Accessibility

• Screen readers get the numbers as a table, plus a one-line summary.
• With reduced motion it is drawn at full height straight away.