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