Setup

Everything you need to set up reaviz.

Installation

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.

Configuration

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:

<style>
  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;
  }
</style>

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

Compatibility

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.

FAQ