googleinterns / react-d3-chart

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

react-d3-chart

Getting Started

Install react-d3-chart using npm or yarn.

yarn add d3-react-chart

npm install d3-react-chart --save

Storybook

React components can be viewed in storybook here

Components

Axis

Provides a basic renderable axis whose location can be specified between left, right, top and bottom.

Left Axis

left-axis

Bottom Axis

bottom-axis

Line

Creates a d3 line from the given coordinate points. Color can be set by passing a string hex value.

line

LineContainer

Renders a group of lines.

line-container

Context

Provides an overivew of the graph contents and allows brushing to select a sub domain.

context

context-gif

Bisector

Attaches a vertical line that will provide the respective y value for each line in the graph for the given mouse position. Used for the cursor's intersection mode.

bisector

bisector-gif

Range Selection

Adds the ability to brush the graph and fire a callback on the domain that was selected.

range-selection

range-selection-gif

Overlay

Wrapper component that handles render and switching between both cursor selection mode.

ModeSelectionContainer

Renders buttons that will appropriately change cursor mode between selection and intersection on click.

ModeSelectionContainer

LineChart

Wrapper component that houses all of the components and functionalities mentioned above. This component is probably the one you will use and manipulate in your project.

Documentation

API Documentation can be viewed here

About

License:Apache License 2.0


Languages

Language:TypeScript 98.9%Language:JavaScript 1.0%Language:HTML 0.1%