https://github.com/seracio/annotation
A minimalist and opinionated annotation component for charts in SVG
https://github.com/seracio/annotation
annotations d3 react svg
Last synced: 21 days ago
JSON representation
A minimalist and opinionated annotation component for charts in SVG
- Host: GitHub
- URL: https://github.com/seracio/annotation
- Owner: seracio
- License: mit
- Created: 2018-12-21T11:07:37.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-23T20:54:05.000Z (over 2 years ago)
- Last Synced: 2025-04-08T23:13:16.765Z (about 2 months ago)
- Topics: annotations, d3, react, svg
- Language: TypeScript
- Homepage: https://seracio.github.io/annotation/index.html
- Size: 589 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Annotation
> A minimalist and opinionated annotation component for charts in SVG
## Disclaimer
Annotations have become really importants for data visualization theses days. This React component allows you to easily create small annotations in SVG charts. It is not as powerfull as the great [react-annotation](https://react-annotation.susielu.com/) by Susie Lu but it is quite simple.
## Paradigm
It's a single component which analyzes its children (only circles and rects are supported), builds an **enclosing shape** (circle or rect), and then properly places an **arrow connetor** to link **the given label** and its coordinates (relatives to the previously computed enclosing shape).
- The children are not rendered, there are only a convenient way to specify the boundaries of the enclosing shape.
- This is why children are only rects and circles... They act as basic bounding boxes to target the data you want to annotate. For instance, if you want to annotate a complex shape (let's say a country path), you'll have to compute first the bouding box and then give it as child of the Annotation component.
## Install
This module has 4 peer dependencies:
```bash
npm i d3 react react-dom # peer dependencies
npm i @seracio/annotation
```
## Basic usage
```jsx
import React from 'react';
import { render } from 'react-dom';
import Annotation from '@seracio/annotation';
const size = 500;
const data = [
{
color: 'black',
position: [250, 50],
radius: 7
},
{
color: 'black',
position: [250, 200],
radius: 7
},
{
color: 'black',
position: [240, 350],
radius: 7
},
{
color: 'black',
position: [260, 380],
radius: 7
}
];
render(
{/** draw all your points */}
{data.map((d, i) => (
))}
{/** you can annotate a single point */}
{/** this shape will not be displayed, it is just to specify the size
of the item you want to annotate */}
{/** the Annotation component will enclose all its children shapes */}
{data
.filter((d) => d.position[1] > 300)
.map((d, i) => (
))}
{data
.filter((d) => d.position[1] > 300)
.map((d, i) => (
))}
);
```
## API
### Props
```typescript
type AnnotationProps = {
label?: string;
dx?: number;
dy?: number;
enclosingType?: 'circle' | 'rect';
arrowStyle?: any;
enclosingStyle?: any;
labelStyle?: any;
labelWidth?: number;
enclosingCardinal?: 'n' | 's' | 'w' | 'e' | 'auto';
children: any;
};
```
### And default props
```typescript
Annotation.defaultProps = {
label = '',
dx = 0,
dy = 0,
enclosingType = 'circle',
enclosingCardinal = 'auto',
enclosingStyle = {},
arrowStyle = {},
labelStyle = {},
labelWidth = 100,
children
};
```
## Caveats
- No multi lines
- This library does not support transform attributes on children