React Skia Chart
🚧 Currently under development 🚧
| Package | Description | Defaults |
|---|---|---|
| @chartext/canvaskit | React canvaskit library | |
| @chartext/chart | React canvaskit chart | ChartDefaults |
| Example | Command |
|---|---|
| examples/chart | pnpm examples:chart dev |
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',
}}
/>
);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;
};
};
};- Clone the repository
git clone https://github.com/chartext/chartext.git - Change into the created directory
cd chartext - Run
pnpm i
- Run
pnpm examples:chart dev - Open up a browser and go to http://127.0.0.1:5173/chartext
| 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