{"id":23220441,"url":"https://github.com/meursyphus/headless-chart","last_synced_at":"2025-04-05T19:10:53.372Z","repository":{"id":240630811,"uuid":"803113037","full_name":"meursyphus/headless-chart","owner":"meursyphus","description":"no limit chart library powered by flitter","archived":false,"fork":false,"pushed_at":"2025-01-07T07:44:47.000Z","size":18375,"stargazers_count":79,"open_issues_count":9,"forks_count":5,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-29T18:06:19.772Z","etag":null,"topics":["chart","chartjs","d3","flitter","nivo"],"latest_commit_sha":null,"homepage":"https://headless-chart.pages.dev","language":"MDX","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/meursyphus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-20T05:08:10.000Z","updated_at":"2025-03-03T08:00:08.000Z","dependencies_parsed_at":"2024-12-16T08:20:30.399Z","dependency_job_id":"6ad22e0a-2b53-4195-93c6-ff511a79790a","html_url":"https://github.com/meursyphus/headless-chart","commit_stats":null,"previous_names":["meursyphus/headless-chart"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meursyphus%2Fheadless-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meursyphus%2Fheadless-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meursyphus%2Fheadless-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meursyphus%2Fheadless-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meursyphus","download_url":"https://codeload.github.com/meursyphus/headless-chart/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247386262,"owners_count":20930619,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","chartjs","d3","flitter","nivo"],"created_at":"2024-12-18T22:12:08.991Z","updated_at":"2025-04-05T19:10:53.355Z","avatar_url":"https://github.com/meursyphus.png","language":"MDX","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Headless Chart\n\nA 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.\n\n## Why Headless Chart?\n\n- **Full Control**: Instead of tweaking chart options, you directly modify widget structures using Flitter's widget system\n- **Framework Agnostic**: Works seamlessly with vanilla JavaScript/TypeScript or any UI framework\n- **Flexible Rendering**: Supports both SVG and Canvas rendering out of the box\n- **React Integration**: Easy integration with React through `@meursyphus/flitter-react`\n\n## Quick Start\n\n```bash\n# Create a new Vite project\nnpm create vite@latest my-chart-app -- --template react\ncd my-chart-app\n\n# Install dependencies\nnpm install @meursyphus/flitter @meursyphus/headless-chart @meursyphus/flitter-react\n```\n\n### Basic Usage\n\n```jsx\nimport ReactWidget from \"@meursyphus/flitter-react\";\nimport { BarChart } from \"@meursyphus/headless-chart\";\n\nexport default function App() {\n  const chart = BarChart({\n    data: {\n      labels: [\"January\", \"February\", \"March\"],\n      datasets: [\n        { legend: \"Sales\", values: [150, 200, 170] }\n      ],\n      title: \"Monthly Sales\"\n    }\n  });\n\n  return (\n    \u003cReactWidget \n      width=\"600px\" \n      height=\"400px\" \n      widget={chart} \n      renderer=\"svg\" \n    /\u003e\n  );\n}\n```\n\n### Custom Chart Example\n\n```jsx\nimport { BarChart } from \"@meursyphus/headless-chart\";\nimport { Text, Container, BoxDecoration } from \"@meursyphus/flitter\";\n\nconst customConfig = {\n  bar: ({ value, label, legend }) =\u003e {\n    return Container({\n      width: 20,\n      height: value * 2,\n      decoration: new BoxDecoration({ \n        color: legend === \"Sales\" ? \"blue\" : \"gray\" \n      }),\n      child: Text(`${value}`, { \n        style: { fill: \"white\" } \n      })\n    });\n  },\n  title: ({ name }) =\u003e {\n    return Text(name, { \n      style: { fontSize: 18, fontWeight: \"bold\" } \n    });\n  }\n};\n\nconst chart = BarChart({\n  data: {\n    title: \"Customized Sales Chart\",\n    labels: [\"Jan\", \"Feb\", \"Mar\"],\n    datasets: [\n      { legend: \"Sales\", values: [150, 200, 170] }\n    ]\n  },\n  custom: customConfig\n});\n```\n\n## Documentation\n\nVisit our [documentation](https://headless-chart.codeium.com/docs/getting-started/introduction) to learn more about:\n- Detailed installation guides\n- Framework integrations\n- Chart customization\n- Advanced examples\n\n## Examples\n\nCheck out our [interactive examples](https://headless-chart.codeium.com/charts) to see what you can build with headless-chart.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeursyphus%2Fheadless-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeursyphus%2Fheadless-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeursyphus%2Fheadless-chart/lists"}