πŸš€ ⏐ Getting Started


Everything you need to set up reaviz.


To start using reaviz, install it via npm (opens in a new tab). Just run this command in your terminal:

npm install reaviz --save

This will add reaviz to your project, allowing you to create beautiful and functional charts with ease.


To customize various elements in the charts, we use CSS Variables (opens in a new tab). These variables give you fine-grained control over the look and feel of your charts. Here are the main CSS variables you can tweak:

  • --tooltip-background -- Background color for tooltips.
  • --tooltip-color -- Text color for tooltips.
  • --tooltip-border-radius -- Border radius for tooltips.
  • --tooltip-spacing -- Spacing inside tooltips.
  • --chart-background -- Background color for charts.
  • --chart-color -- Main color for charts.
  • --chart-handle-fill -- Fill color for chart handles.
  • --chart-handle-stroke -- Stroke color for chart handles.
  • --chart-handle-drag-fill -- Fill color when handles are dragged.
  • --chart-handle-dots -- Color of dots on chart handles.
  • --chart-handle-line -- Color of lines on chart handles.

These names are based on the Google Material design spec. These variables are not setup when you install the project automatically but if you want some sensible defaults here is what we use in the Storybook demo:

  body {
  --tooltip-background: rgba(0,5,11,0.9);
  --tooltip-color: #fff;
  --tooltip-border-radius: 5px;
  --tooltip-spacing: 5px;
  --chart-background: rgb(51, 51, 51);
  --chart-color: #fff;
  --chart-handle-fill: #2c343a;
  --chart-handle-stroke: #67c2e4;
  --chart-handle-drag-fill: transparent;
  --chart-handle-dots: #67c2e4;
  --chart-handle-line: #67c2e4;

Feel free to adjust these variables to match your project's design.


Reaviz is built to work seamlessly with React v16+ and ReactDOM. Unfortunately, it doesn't support React Native at the moment, but we're always looking to improve and expand compatibility in future updates.


How do I install reaviz?

You can install reaviz via npm, pnpm, yarn and bun

How do I customize the styles?

You can customize chart styles using CSS variables, such as --tooltip-background and --chart-color. See the full list of variables in the Configuration section above.

Which React versions are supported?

Reaviz is compatible with React v16+ and works with ReactDOM. React Native is not supported at this time.

What chart types are available in reaviz?

Reaviz supports a variety of chart types including: Bar Charts, Line Charts, Area Charts, Scatter Charts, Pie Charts, Sankey Charts, Gauge Charts, Map Charts, Heatmaps, Venn Diagrams, Bubble Charts, Treemaps, and more. Each type comes with different variations to fit your needs.

Does reaviz support animations and interactivity?

Yes, reaviz includes animations for entering, updating, and exiting elements. It also supports gestures like pinch, pan, zoom, and move, making your charts interactive and engaging.

How do I run reaviz locally?

If you want to run reaviz locally, follow these steps:

  1. Clone the repository
  2. Run npm install
  3. Run npm start
  4. Your browser will open to the Storybook page