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

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

Area chart

Feature set roadmap

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

Bar chart

Feature set roadmap

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

Spider chart

Feature set roadmap

• [x] Annotations

• [ ] SVG icon support for annotations

• [ ] Zooming

• [x] Data nodes

• [x] Tooltips

• [ ] Legend