Giter VIP home page Giter VIP logo

chartext's Introduction

chartext

Prettier Linter Deploy Pages

React Skia Chart

๐Ÿšง Currently under development ๐Ÿšง

Demo

Chart Demo

Packages

Package Description Defaults
@chartext/canvaskit React canvaskit library
@chartext/chart React canvaskit chart ChartDefaults

Examples

Example Command
examples/chart pnpm examples:chart dev

Chart Snippet

See ExampleChart.tsx

const series: Series[] = generateSeriesArr([
  {
    xRange: { min: -100, max: 100 },
    yRange: { min: -100, max: 100 },
    type: 'line',
    count: 5,
    dataCount: 100,
  },
]);

return (
  <Chart
    height={480}
    width={640}
    series={series}
    xAxis={{
      label: 'X Axis',
    }}
    yAxis={{
      label: 'Y Axis',
    }}
  />
);

Configs (All properties are optional)

ChartDefaults

height: number;
width: number;
xAxis: {
  position: 'top' | 'bottom';
  label: string;
  size: number;
  showZero: boolean;
}
yAxis: {
  position: 'left' | 'right';
  label: string;
  size: number;
  showZero: boolean;
}
x: {
  formatter: CoordFormatter;
  parser: CoordParser<CoordType>;
  key: string;
}
y: {
  formatter: CoordFormatter;
  parser: CoordParser<CoordType>;
  key: string;
}
theme: ChartThemeConfig;
backgroundColor: string;
margin: {
  left: number;
  top: number;
  right: number;
  bottom: number;
};
seriesColors: string[];
xAxis: {
  labelStyle: {
    fontSize: number;
    fontColor: string;
  };
  tickStyle: {
    color: string;
    zeroColor: string;
    labelStyle: {
      fontSize: number;
      fontColor: string;
    };
  };
};
yAxis: {
  labelStyle: {
    fontSize: number;
    fontColor: string;
  };
  tickStyle: {
    color: string;
    zeroColor: string;
    labelStyle: {
      fontSize: number;
      fontColor: string;
    };
  };
};

Contributing

Prerequisites

Steps

  1. Clone the repository git clone https://github.com/chartext/chartext.git
  2. Change into the created directory cd chartext
  3. Run pnpm i

Running locally

  1. Run pnpm examples:chart dev
  2. Open up a browser and go to http://127.0.0.1:5173/chartext

Scripts

Command Description
pnpm canvaskit Alias to run scripts from packages/canvaskit/package.json
pnpm chart Alias to run scripts from packages/chart/package.json
pnpm examples:chart Alias to run scripts from examples/chart/package.json
lint:check Runs ESLint to check for issues
lint:fix Runs ESLint to fix as many issues as possible
prettier:check Runs Prettier to check formatting
prettier:fix Runs Prettier to fix formatting

Use (Ctrl + Shift + P) to open vscode's command palette and then execute >Reload Window

Extensions

See .vscode/extensions.json

Optional

References

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.