eyecue-react-web

Visual components for eyecue websites, managed through npm

Installation

To install the components, simply run npm i eyecue-react-web

Components

PieChart

Required Props

• pcts: an array of percentages that must add up to 100 for the graph to appear correctly. Underflow will be filled in by a background color. Overflow will cover up the lower percentages.
• colors: an array of colors to assign to each percentage value given. Read in order.
• background: the background color used on the wheel before it fills.
• width: the width of the circle.
• size: the square size in pixels of the canvas.
• speed: the speed at which the piechart is animated. (Good values range from about 40 to 100, the value itself is relative)
• pie: whether or not the graph should be a pie chart. Takes true or false.
• canvasID: the unique identifier for the canvas element. IMPORTANT: This must be unique when there is more than one pie chart being rendered at the same time.

Example

<PieChart
  pcts={[67,13,10,10]}
  colors={["green", "#ccc333", "grey", "black"]}
  background="#efefef"
  width={20}
  size={200}
  speed={70}
  pie={false}
  canvasID={'cheese'}
/>