@chameleon-ds/chart

Chameleon chart

Usage no npm install needed!

<script type="module">
  import chameleonDsChart from 'https://cdn.skypack.dev/@chameleon-ds/chart';
</script>

README

Chameleon Chart

import { html } from "@open-wc/demoing-storybook";
import { withKnobs, text, number } from "@open-wc/demoing-storybook";
import "./chameleon-chart.js";

export default {
  title: "Components|Data and Visualizations/Chart",
  component: "chameleon-chart",
  decorators: [withKnobs],
  options: { selectedPanel: "storybookjs/docs/panel" },
};

Properties

Property Name Type(s) Default Value Description
type String "" The type of chart
color String "#00870a" The hex value of the chart color
percentage Number 0 The percentage to be displayed in the chart
label String "0" The value to show in the label
subLabel String "" The value to show in the sublabel

Examples

Default

export const Default = () => {
  const color = text("Color", "#00870a");
  const label = text("Label", "1,000");
  const subLabel = text("SubLabel", "Funds Remaining");
  const percentage = number("Percentage", 90);

  return html`
    <chameleon-chart
      color="${color}"
      percentage="${percentage}"
      label="${label}"
      subLabel="${subLabel}"
      type="arc"
    ></chameleon-chart>
  `;
};