Skip to content
πŸ“Š Data visualization library for React based on D3
TypeScript JavaScript Other
Branch: master
Clone or download
Latest commit 25b1eba Nov 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci maybe? Oct 10, 2019
.github add stale lint Mar 14, 2019
.storybook Merge branch 'master' of https://github.com/jask-oss/reaviz Nov 11, 2019
.vscode Update Bar Chart Tooltips to Support Proximity (#109) Nov 14, 2019
demo improve sonar demo Nov 15, 2019
docs
public add favs [skip ci] Oct 9, 2019
src improve sonar demo Nov 15, 2019
types docs inside storybook Mar 6, 2019
.editorconfig here we go! Mar 1, 2019
.gitignore fix cname Sep 30, 2019
.prettierrc various lint fixes Apr 25, 2019
CHANGELOG.md update package Nov 14, 2019
CNAME
LICENSE Initial commit Feb 18, 2019
README.md tweak readme Oct 29, 2019
babel.config.js fix center Nov 11, 2019
package.json bump pkgs Nov 15, 2019
rollup.config.js Fix esm module in rollup.config.js Oct 3, 2019
tsconfig.json Typescript in Storybook (#98) Oct 10, 2019
yarn.lock bump pkgs Nov 15, 2019

README.md


Data visualization library for React based on D3js


REAVIZ is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The library provides an easy way to get started creating charts without sacrificing customization ability.

πŸš€ Quick Links

✨ Features

Chart types include:

  • Bar Chart
    • Single Series Vertical / Horizontal
    • Multi Series Vertical / Horizontal
    • Stacked Vertical / Horizontal
    • Stacked Normalized Vertical / Horizontal
    • Stacked Diverging Vertical / Horizontal
    • Marimekko
    • Radial
    • Sparkline
    • Waterfall
  • Line Chart
    • Single Series
    • Multi Series
    • Stacked
    • Stacked Normalized
    • Radial
    • Sparklines
  • Area Chart
    • Single Series
    • Multi Series
    • Stacked
    • Stacked Normalized
    • Radial
    • Sparklines
  • Bubble Chart
    • Linear
    • Radial
  • Scatter Chart
    • Linear
    • Radial
  • Pie Chart
    • Standard
    • Exploded
  • Donut Chart
  • Sankey chart
  • Hive Plot
  • Gauge
    • Radial
    • Linear
  • Map Chart
  • Heatmap
    • Standard
    • Year Calendar
    • Month Calendar

Additional features:

  • Legend
    • Discrete
    • Sequential
  • Axis
    • Linear
    • Radial
    • Advanced Label Positioning
  • Gestures
    • Pinch
    • Pan
    • Zoom
    • Move
  • Tooltip
    • Single Value
    • Grouped Values
  • Line/Area Series Symbols
  • Animations Enter/Update/Exit
  • Brush
  • Patterns
  • Gradients
  • Grid Lines
  • Mark Lines
  • BigInt Support
  • Auto Sizing
  • Range Lines
  • SSR

πŸ“¦ Install

To use reaviz in your project, install it via npm/yarn:

npm i reaviz --save

then import a chart type into your JSX element:

import { BarChart } from "reaviz";

const data = [
  { key: 'IDS', data: 14 },
  { key: 'Malware', data: 5 },
  { key: 'DLP', data: 18 }
];

const App = () => <BarChart width={350} height={250} data={data} />;

Checkout this demo live or visit the demos page to learn more!

πŸ”­ Development

If you want to run REAVIZ locally, its super easy!

  • Clone the repository
  • yarn install
  • yarn start
  • Browser opens to Storybook page

to publish the repo to git you can run:

  • yarn version --new-version x.x.x to bump the version
  • git push --follow-tags
You can’t perform that action at this time.