headless-chart

KO | EN

gitlite — search

#react #typescript #llm #go #android #deep-learning #linux #macos #windows #awesome #vue #awesome-list #ios #mcp

(★ 83)

no limit chart library powered by flitter

headless-chart 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Headless Chart

A powerful chart library built on top of the [Flitter](https://flitter.dev/) framework that provides a headless way to define and compose charts. Unlike traditional chart libraries where you are constrained by predefined components, headless-chart gives you building blocks that you can shape and style to meet your exact needs.

## Why Headless Chart?

- **Full Control**: Instead of tweaking chart options, you directly modify widget structures using Flitter's widget system
- **Framework Agnostic**: Works seamlessly with vanilla JavaScript/TypeScript or any UI framework
- **Flexible Rendering**: Supports both SVG and Canvas rendering out of the box
- **React Integration**: Easy integration with React through `@meursyphus/flitter-react`

## Quick Start

```bash
# Create a new Vite project
npm create vite@latest my-chart-app -- --template react
cd my-chart-app

# Install dependencies
npm install @meursyphus/flitter @meursyphus/headless-chart @meursyphus/flitter-react
```

### Basic Usage

```jsx
import ReactWidget from "@meursyphus/flitter-react";
import { BarChart } from "@meursyphus/headless-chart";

export default function App() {
  const chart = BarChart({
    data: {
      labels: ["January", "February", "March"],
      datasets: [
        { legend: "Sales", values: [150, 200, 170] }
      ],
      title: "Monthly Sales"
    }
  });

return (
    <ReactWidget 
      width="600px" 
      height="400px" 
      widget={chart} 
      renderer="svg" 
    />
  );
}
```

### Custom Chart Example

```jsx
import { BarChart } from "@meursyphus/headless-chart";
import { Text, Container, BoxDecoration } from "@meursyphus/flitter";

const chart = BarChart({
  data: {
    title: "Customized Sales Chart",
    labels: ["Jan", "Feb", "Mar"],
    datasets: [
      { legend: "Sales", values: [150, 200, 170] }
    ]
  },
  custom: customConfig
});
```

## Documentation

Visit our [documentation](https://headless-chart.codeium.com/docs/getting-started/introduction) to learn more about:
- Detailed installation guides
- Framework integrations
- Chart customization
- Advanced examples

## Examples

Check out our [interactive examples](https://headless-chart.codeium.com/charts) to see what you can build with headless-chart.

## License

MIT

headless-chart

headless-chart 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

headless-chart

headless-chart 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README