Skip to content
This repository has been archived by the owner on Apr 9, 2024. It is now read-only.
/ react-dc-js Public archive

Multi-dimensional charting based on dc.js for React

License

Notifications You must be signed in to change notification settings

dc-js/react-dc-js

Repository files navigation

Node.js CI npm version styled with prettier

Dc.js for React

React-dc-js is a library built around dc.js to provide React chart bindings. Our goal is to provide simple components to render endless dimensional charting possibilities built to work natively with crossfilter rendered using d3.js.

👋️ Note: Dc.js for React is not yet fully finished and is still under heavy development. Documentation for specific chart properties won't be available before the first stable release.

Preview

Installation

Using npm

$ npm install react-dc-js

Usage

This library makes an effort to seamlessly integrate with dc.js, maintaining the JSX components very similar to each chart method usage. Most of the chart attributes are available with the exact same name as the original function.

import { PieChart } from 'react-dc-js'
import crossfilter from 'crossfilter2'

function YourChart() {
  const cx = crossfilter(data)
  const dimension = cx.dimension(d => d.propName)

  return <PieChart dimension={dimension} group={dimension.group()} />
}

Experimenting

We provide a playground and a development server for you to experiment with any use-case. Inside the folder playground/ you shall find create-react-app bootstrapped with react-dc-js.

$ npm install

$ cd playground
$ npm install
$ npm start

Optionally, you can also use npm link if you prefer to import from react-dc-js inside playground.

Contributing

We welcome community support with both pull requests and reporting bugs.

To enable hot compilation while experimenting in the playground, run in a new tab:

$ npm run build:watch

react-dc-js is linted with prettier.

License

react-dc-js is an open source javascript library and licensed under Apache License v2.

About

Multi-dimensional charting based on dc.js for React

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages