# @d3fc/d3fc-shape

> A collection of SVG/canvas path generators for creating chart series

Latest version **6.0.1** (published 2020-07-14) · MIT license · 16.2K weekly downloads

## Install

```sh
npm install @d3fc/d3fc-shape
pnpm add @d3fc/d3fc-shape
yarn add @d3fc/d3fc-shape
bun add @d3fc/d3fc-shape
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.0.1 |
| Published | 2020-07-14 |
| First published | 2018-08-02 |
| Weekly downloads | 16.2K |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 326.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1350 |
| Maintainers | chrisprice, colineberhardt, tlsim |
| Keywords | d3, d3fc, svg, path, canvas, context, context2d |

## Links

- npm: https://www.npmjs.com/package/@d3fc/d3fc-shape
- Repository: https://github.com/d3fc/d3fc
- Issues: https://github.com/d3fc/d3fc/issues
- npm.io page: https://npm.io/package/@d3fc/d3fc-shape

## Alternatives

- [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads
- [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads
- [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads
- [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads
- [tg-resolve](https://npm.io/package/tg-resolve.md) — 176 weekly downloads

## Recent versions

- 6.0.1 (latest) — 2020-07-14
- 6.0.0 — 2020-04-16
- 5.1.0 — 2020-03-19
- 5.0.19 — 2019-11-28
- 5.0.18 — 2019-09-04
- 5.0.17 — 2019-08-14
- 5.0.16 — 2019-08-14
- 5.0.15 — 2019-08-14
- 5.0.14 — 2019-08-12
- 5.0.13 — 2019-08-12
- 5.0.12 — 2019-08-12
- 5.0.11 — 2019-08-12
- 5.0.10 — 2019-08-12
- 5.0.9 — 2019-08-12
- 5.0.8 — 2019-05-28
- … 8 more at https://npm.io/package/@d3fc/d3fc-shape/versions

## README

# d3fc-shape

A collection of SVG/canvas path generators for creating chart series

[Main D3FC package](https://github.com/d3fc/d3fc)

## Installing

```bash
npm install @d3fc/d3fc-shape
```

## API Reference

* [Example usage](#example-usage)
* [Bar](#bar)
* [Boxplot](#boxplot)
* [Candlestick](#candlestick)
* [Error Bar](#error-bar)
* [OHLC](#ohlc)

All of the exported functions have the same signature, `(context) => generator`. The context supplied must be an implementation of the subset of Context2D methods as implemented by [d3-path](https://github.com/d3/d3-path) (or indeed a Context2D!).

You can then configure the `generator` by invoking the relevant methods (e.g. `generator.x(/* ... */)`) as described below. Once suitably configured invoke the generator function itself with the required data (e.g. `generator([/* ... */])`).

### Example usage

#### SVG

```javascript

import { path } from 'd3-path';
import { shapeCandlestick } from 'd3fc-shape';

const ctx = path();

const candlestick = shapeCandlestick()
  .x((d, i) => i)
  .open((d) => d.open)
  .high((d) => d.high)
  .low((d) => d.low)
  .close((d) => d.close);

d3.select('path')
  .datum([
    { open: 4, high: 5, low: 3, close: 3 }
  ])
  .attr('d', candlestick);

```

#### Canvas

```javascript

import { shapeCandlestick } from 'd3fc-shape';

const ctx = document.querySelector('canvas').getContext('2d');

const candlestick = shapeCandlestick()
  .context(ctx)
  .x((d, i) => i)
  .open((d) => d.open)
  .high((d) => d.high)
  .low((d) => d.low)
  .close((d) => d.close);

candlestick([
  { open: 4, high: 5, low: 3, close: 3 }
]);

ctx.stroke();

```

### Bar

<a name="shapeBar" href="#shapeBar">#</a> fc.**shapeBar**(*context*)

<a name="shapeBar_x" href="#shapeBar_x">#</a> *shapeBar*.**x**(*accessorFunc*)  
<a name="shapeBar_y" href="#shapeBar_y">#</a> *shapeBar*.**y**(*accessorFunc*)  
<a name="shapeBar_width" href="#shapeBar_width">#</a> *shapeBar*.**width**(*accessorFunc*)  
<a name="shapeBar_height" href="#shapeBar_height">#</a> *shapeBar*.**height**(*accessorFunc*)  

The attribute accessor methods available to set the way the bar chart accesses the data.
The `accessorFunc(datum, index)` function is called on each item of the data, and returns
the relevant value for the relevant attribute for that item.

<a name="shapeBar_horizontalAlign" href="#shapeBar_horizontalAlign">#</a> *shapeBar*.**horizontalAlign**(*alignment*)  

`alignment` is one of: `left`, `right` or `center` (default)

<a name="shapeBar_verticalAlign" href="#shapeBar_verticalAlign">#</a> *shapeBar*.**verticalAlign**(*alignment*)  

`alignment` is one of: `bottom`, `top` or `center` (default)

### Boxplot

<a name="shapeBoxPlot" href="#shapeBoxPlot">#</a> fc.**shapeBoxPlot**(*context*)

<a name="shapeBoxPlot_value" href="#shapeBoxPlot_value">#</a> *shapeBoxPlot*.**value**(*accessorFunc*)  
<a name="shapeBoxPlot_median" href="#shapeBoxPlot_median">#</a> *shapeBoxPlot*.**median**(*accessorFunc*)  
<a name="shapeBoxPlot_upperQuartile" href="#shapeBoxPlot_upperQuartile">#</a> *shapeBoxPlot*.**upperQuartile**(*accessorFunc*)  
<a name="shapeBoxPlot_lowerQuartile" href="#shapeBoxPlot_lowerQuartile">#</a> *shapeBoxPlot*.**lowerQuartile**(*accessorFunc*)  
<a name="shapeBoxPlot_high" href="#shapeBoxPlot_high">#</a> *shapeBoxPlot*.**high**(*accessorFunc*)  
<a name="shapeBoxPlot_low" href="#shapeBoxPlot_low">#</a> *shapeBoxPlot*.**low**(*accessorFunc*)  
<a name="shapeBoxPlot_width" href="#shapeBoxPlot_width">#</a> *shapeBoxPlot*.**width**(*accessorFunc*)  

The attribute accessor methods available to set the way the bar chart accesses the data.
The `accessorFunc(datum, index)` function is called on each item of the data, and returns
the relevant value for the relevant attribute for that item.

<a name="shapeBoxPlot_cap" href="#shapeBoxPlot_cap">#</a> *shapeBoxPlot*.**cap**(*accessorFunc*)  

The `accessorFunc(item, index)` function is called on each item of the data, and returns
the **proprtion** of the box width that the caps width should be.

<a name="shapeBoxPlot_orient" href="#shapeBoxPlot_orient">#</a> *shapeBoxPlot*.**orient**(*orientation*)  

Orientation of the chart. Either `horizontal` (default) or `vertical`

### Candlestick

<a name="shapeCandlestick" href="#shapeCandlestick">#</a> fc.**shapeCandlestick**(*context*)

<a name="shapeCandlestick_x" href="#shapeCandlestick_x">#</a> *shapeCandlestick*.**x**(*accessorFunc*)  
<a name="shapeCandlestick_open" href="#shapeCandlestick_open">#</a> *shapeCandlestick*.**open**(*accessorFunc*)  
<a name="shapeCandlestick_high" href="#shapeCandlestick_high">#</a> *shapeCandlestick*.**high**(*accessorFunc*)  
<a name="shapeCandlestick_low" href="#shapeCandlestick_low">#</a> *shapeCandlestick*.**low**(*accessorFunc*)  
<a name="shapeCandlestick_close" href="#shapeCandlestick_close">#</a> *shapeCandlestick*.**close**(*accessorFunc*)  
<a name="shapeCandlestick_width" href="#shapeCandlestick_width">#</a> *shapeCandlestick*.**width**(*accessorFunc*)  

The attribute accessor methods available to set the way the bar chart accesses the data.
The `accessorFunc(datum, index)` function is called on each item of the data, and returns
the relevant value for the relevant attribute for that item.

### Error Bar

<a name="shapeErrorBar" href="#shapeErrorBar">#</a> fc.**shapeErrorBar**(*context*)

<a name="shapeErrorBar_value" href="#shapeErrorBar_value">#</a> *shapeErrorBar*.**value**(*accessorFunc*)  
<a name="shapeErrorBar_high" href="#shapeErrorBar_high">#</a> *shapeErrorBar*.**high**(*accessorFunc*)  
<a name="shapeErrorBar_low" href="#shapeErrorBar_low">#</a> *shapeErrorBar*.**low**(*accessorFunc*)  
<a name="shapeErrorBar_width" href="#shapeErrorBar_width">#</a> *shapeErrorBar*.**width**(*accessorFunc*)  

The attribute accessor methods available to set the way the bar chart accesses the data.
The `accessorFunc(datum, index)` function is called on each item of the data, and returns
the relevant value for the relevant attribute for that item.

<a name="shapeErrorBar_orient" href="#shapeErrorBar_orient">#</a> *shapeErrorBar*.**orient**(*orientation*)  

Orientation of the chart. Either `horizontal` (default) or `vertical`

### OHLC

<a name="shapeOhlc" href="#shapeOhlc">#</a> fc.**shapeOhlc**(*context*)

<a name="shapeOhlc_x" href="#shapeOhlc_x">#</a> *shapeOhlc*.**x**(*accessorFunc*)  
<a name="shapeOhlc_open" href="#shapeOhlc_open">#</a> *shapeOhlc*.**open**(*accessorFunc*)  
<a name="shapeOhlc_high" href="#shapeOhlc_high">#</a> *shapeOhlc*.**high**(*accessorFunc*)  
<a name="shapeOhlc_low" href="#shapeOhlc_low">#</a> *shapeOhlc*.**low**(*accessorFunc*)  
<a name="shapeOhlc_close" href="#shapeOhlc_close">#</a> *shapeOhlc*.**close**(*accessorFunc*)  
<a name="shapeOhlc_width" href="#shapeOhlc_width">#</a> *shapeOhlc*.**width**(*accessorFunc*)  

The attribute accessor methods available to set the way the bar chart accesses the data.
The `accessorFunc(datum, index)` function is called on each item of the data, and returns
the relevant value for the relevant attribute for that item.

<a name="shapeOhlc_orient" href="#shapeOhlc_orient">#</a> *shapeOhlc*.**orient**(*orientation*)  

Orientation of the chart. Either `horizontal` (default) or `vertical`

---
_Source: https://npm.io/package/@d3fc/d3fc-shape · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._