KPie-chart

This is a lightweight, simple chart for tracking KPIs

Dependencies

It depends on the EasyPieChart with the respective options.

Property (Type)	Default	Description
Renderer	Canvas	Render-Engine in order to output the Chart
barColor	#ef1e25	The color of the curcular bar. You can either pass a valid css color string, or a function that takes the current percentage as a value and returns a valid css color string.
trackColor	#f2f2f2	The color of the track, or false to disable rendering.
scaleColor	#dfe0e0	The color of the scale lines, false to disable rendering.
scaleLength	5	Length of the scale lines (reduces the radius of the chart).
lineCap	round	Defines how the ending of the bar line looks like. Possible values are: butt, round and square.
lineWidth	3	Width of the chart line in px.
size	110	Size of the pie chart in px. It will always be a square.
rotate	0	Rotation of the complete chart in degrees.
animate	object	Object with time in milliseconds and boolean for an animation of the bar growing ({ duration: 1000, enabled: true }), or false to deactivate animations.
easing	defaultEasing	Easing function or string with the name of a jQuery easing function

Example

import * as React from "react";
import * as ReactDOM from "react-dom";
import { KPieLayout } from "./KPieLayout";
import { KPie } from "./KPie";

var mountNode = document.getElementById("app");
ReactDOM.render(
  <>
    <KPieLayout columns={2}>
      <KPie
        value={100}
        threshold={40}
        target={80}
        options={{
          barColor: "#69c",
          scaleColor: "#00378b",
          lineWidth: 15
        }}
      />
      <KPie
        value={80}
        threshold={40}
        target={80}
        options={{
          barColor: "#9bbfd4",
          scaleColor: false,
          lineWidth: 20,
          lineCap: "circle"
        }}
      />
      <KPie
        value={75}
        threshold={40}
        target={80}
        options={{
          barColor: "#fdf65a",
          lineWidth: 15,
          lineCap: "circle"
        }}
      />
      <KPie
        value={60}
        threshold={40}
        target={80}
        options={{
          renderer: "SVG",
          lineWidth: 20
        }}
      />
    </KPieLayout>
    <KPieLayout columns={3}>
      <KPie
        value={20}
        threshold={40}
        target={80}
        options={{
          barColor: "#69c",
          scaleColor: "#00378b",
          lineWidth: 15
        }}
      />
      <KPie
        value={80}
        threshold={40}
        target={80}
        options={{
          barColor: "#9bbfd4",
          scaleColor: false,
          lineWidth: 20,
          lineCap: "circle"
        }}
      />
      <KPie
        value={75}
        threshold={40}
        target={80}
        options={{
          barColor: "#fdf65a",
          lineWidth: 15,
          lineCap: "circle"
        }}
      />
      <KPie
        value={100}
        threshold={40}
        target={80}
        options={{
          renderer: "SVG",
          barColor: "#2C3E50",
          // scaleColor: false,
          lineWidth: 20
          // lineCap: "circle"
        }}
      />
    </KPieLayout>
  </>,
  mountNode
);