Getting Started

Twigs Charts is a React component library from SurveySparrow for building charts. It is built on top of Recharts and provides a set of components for building charts.

Installation

npm install @surveysparrow/twigs-charts

yarn add @surveysparrow/twigs-charts

pnpm add @surveysparrow/twigs-charts

Make sure these peer dependencies are installed in your project:

npm install @surveysparrow/twigs-react recharts

yarn add @surveysparrow/twigs-react recharts

pnpm add @surveysparrow/twigs-react recharts

Usage

The package provides a ThemeProvider component that can be used to provide a theme to the charts, it should be wrapped around a top level component in your application.

import { ThemeProvider  } from "@surveysparrow/twigs-charts";

<ThemeProvider
  theme={{
    fontFamily: "DM Sans",
    fontFamilyAlternate: "DM Mono",
    colors: {
      primary: "#7158F5",
      list: [
        "#7158F5",
        "#EE7D61",
        "#98E0D8",
        "#EFBE55",
        "#84CC16",
      ],
    }
  }}
>
  <Charts />
</ThemeProvider>