@chameleon-ds/chart

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>
  `;
};