Introduction

headless-chart is a highly customizable chart library built on top of the Flitter framework. It provides a powerful, headless way to define and compose charts. Unlike traditional chart libraries where you are constrained by predefined components, headless-chart gives you building blocks (in the form of Flitter widgets) that you can shape and style to meet your exact needs.

Key Features

• Full Customization: Instead of tweaking chart options, you directly modify widget structures.
• Flitter-Powered Layout: Automatic layout calculations, dual renderer support (SVG/Canvas), built-in interactions and animations are inherited from Flitter.
• Extendable & Flexible: Compose your own bars, legends, axes, and grids by implementing custom widget functions.

In other words, headless-chart provides a chart “backbone” on top of Flitter’s widget system, allowing you to build any type of chart with minimal restrictions.

What You’ll Learn

By following this guide, you will learn:

1. How to install and set up headless-chart in your project.
2. How to integrate with Flitter and run your chart in a pure Vite environment.
3. How to use @meursyphus/flitter-react to simplify rendering in React apps.
4. The fundamental concepts of customizing chart components using BarChartCustom configurations.

Prerequisites

• Basic Knowledge of Flitter: While headless-chart works seamlessly with Flitter, having a fundamental understanding of Flitter’s widget system will be beneficial.
• React (Optional): For those looking to integrate with React, a basic understanding of React is helpful, though not strictly required.

Let’s get started by installing headless-chart and setting up our environment.