img-charts v1.0.0

IMG Charts

IMG Arena's very own charting library.

Made with D3 and SVG.

Built with ❤️ by the integrity team.

Repo architecture

libs

This folder contains the img-react-* libraries. Each library is aimed at a particular frontend framework. As of now the react and solid frameworks are supported.

packages

This folder contains a bunch of common code bundled into individual packages, which are used across the various img-react-* libraries.

Use pnpm commands to build and add these packages to the libraries.

apps

This folder contains the demo apps for the img-react-* libraries and also contains the documentation site.

To add the shared-types, shared-defaults and shared-utils packages to the img-react-react library, run the following command from the root of the repo.

Example

pnpm add shared-types shared-defaults shared-utils --filter img-react-react --workspace

Getting started

1. Install pnpm globally.
2. Build the packages and libraries using pnpm build.
3. Run the demo apps using pnpm commands pnpm --filter img-charts-react-demo dev.

Supported charts

Line charts

Feature set roadmap

• Annotations
• SVG icon support for annotations
• Zooming
• Panning
• Data nodes
• Tooltips
• Legend
• Multi line chart
• Step map
• Alternating colour bands
• Range annotation

Area chart

Feature set roadmap

• Annotations
• SVG icon support for annotations
• Zooming
• Panning
• Data nodes
• Tooltips
• Legend
• Multi area chart
• Step map
• Alternating colour bands
• Range annotation

Bar chart

Feature set roadmap

• Annotations
• SVG icon support for annotations
• Zooming
• Panning
• Data nodes
• Tooltips
• Legend
• Multi bar chart
• Stacked multi bar chart
• Alternating colour bands

Spider chart

Feature set roadmap

• Annotations
• SVG icon support for annotations
• Zooming
• Data nodes
• Tooltips
• Legend