tekchart v1.0.19

Tekchart

Tekchart is a React UI library for building charts / reports.

The library is bootstrapped with React, TypeScript and Vite. It also uses Ant Design Charts as the core chart UI package.

Demo

You can view demo of Tekchart UI components (with code example included) here: https://tekchart.dev.teko.vn/

Installation

Prerequisites

• Node version: 18+
• TypeScript version: 5+

You can install the library with npm or yarn:

npm

npm i tekchart

yarn

yarn add tekchart

Usage

Simply import the needed chart UI component from the library:

import { Line } from "tekchart";

Use the component in a suitable position:

const App: React.FC = () => {
  const data = [
    { label: "2000", value: 3 },
    { label: "2002", value: 4 },
    { label: "2004", value: 3.5 },
    { label: "2006", value: 5 },
    { label: "2008", value: 4.9 },
    { label: "2010", value: 6 },
    { label: "2012", value: 8 },
    { label: "2014", value: 9 },
    { label: "2016", value: 13 },
  ];

  const config = {
    title: "Single Line Chart",
    data,
    xField: "label",
    yField: "value",
    axis: {
      x: { title: "Time" },
      y: { title: "Value" },
    },
    style: {
      lineWidth: 2,
    },
  };

  return <Line {...config} />;
};

Preview

Components

List of charts that the library supports:

• Line (single & multiple)
• Column (single, multiple & stacked)
• Bar (single, multiple & stacked)
• Area (single & stacked)
• Pie (pie & donut)
• Combination (eg: Line + Column)