# turn-to-chart

> Library which renders an HTML charts based on markdown or csv tables

Latest version **1.0.2** (published 2022-11-29) · 0 weekly downloads

## Install

```sh
npm install turn-to-chart
pnpm add turn-to-chart
yarn add turn-to-chart
bun add turn-to-chart
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-11-29 |
| First published | 2022-10-15 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 13 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Samuel Gagnepain |
| Maintainers | winbee |
| Keywords | csv, markdown, graph, chart, ui |

## Links

- npm: https://www.npmjs.com/package/turn-to-chart
- Homepage: https://github.com/Winbee/turn-to-chart
- npm.io page: https://npm.io/package/turn-to-chart

## Dependencies (13)

- [react](https://npm.io/package/react.md) ^18.2.0
- [d3-time](https://npm.io/package/d3-time.md) ^3.0.0
- [d3-format](https://npm.io/package/d3-format.md) ^3.1.0
- [papaparse](https://npm.io/package/papaparse.md) ^5.3.2
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [@visx/axis](https://npm.io/package/@visx/axis.md) ^2.14.0
- [@visx/group](https://npm.io/package/@visx/group.md) ^2.10.0
- [@visx/scale](https://npm.io/package/@visx/scale.md) ^2.2.2
- [@visx/shape](https://npm.io/package/@visx/shape.md) ^2.12.2
- [@visx/legend](https://npm.io/package/@visx/legend.md) ^2.10.0
- [d3-time-format](https://npm.io/package/d3-time-format.md) ^4.1.0
- [@visx/clip-path](https://npm.io/package/@visx/clip-path.md) ^2.10.0
- [d3-scale-chromatic](https://npm.io/package/d3-scale-chromatic.md) ^3.0.0

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2022-11-29
- 1.0.1 — 2022-10-17
- 1.0.0 — 2022-10-16
- 0.1.0 — 2022-10-16
- 0.0.5 — 2022-10-16
- 0.0.4 — 2022-10-16
- 0.0.3 — 2022-10-15
- 0.0.2 — 2022-10-15
- 0.0.1 — 2022-10-15

## README

# :memo::curly_loop::bar_chart: Transforms tables to charts

This library transforms a `markdown` or `csv` table into an HTML chart

It can be used both in the browser and node.

It is used in:
- [a joplin plugin](https://github.com/Winbee/joplin-turn-to-chart)
- [a markdown-it plugin](https://github.com/Winbee/markdown-it-turn-to-chart)
- [a live editor](https://winbee.github.io/turn-to-chart/)

## Example usage

- First add it to your package with `npm install turn-to-chart`
- Then use in your code:

```typescript
import { generateHtmlString } from "turn-to-chart";

const inputString = `
| xLabel  | series1 (unit1) |
| :------ | ------ |
| 0 | 2000 |
| 1 | 4000 |
| 35 | 8000 |

legendTitle: This is a title
yAxisOrigin: from zero
`;
const result = generateHtmlString(inputString);

if(result.metadata.isSucess === true){
    // Handle the data
    console.log(result.data)
} else {
    // Handle the errors
    console.log(result.errors)
}
```

## Available options

You have the possiblity to modify the chart by adding options after the table. There should be one option per line and it should follow the following syntax:  `optionKey: value of this option`.

### customLocale
- **Type:** see the list below  
- **Default:** `en-GB` 

Translate in this locale the date on the xAxis when xAxisType=`date`.

Here is the list of locale available:
- `ar-EG`: Arabic (Egypt)
- `ca-ES`: Catalan (Spain)
- `cs-CZ`: Czech (Czech Republic)
- `da-DK`: Danish (Denmark)
- `de-CH`: German (Switzerland)
- `de-DE`: German (Germany)
- `en-CA`: English (Canada)
- `en-GB`: English (United Kingdom)
- `en-US`: English (United States)
- `es-ES`: Spanish (Spain)
- `es-MX`: Spanish (Mexico)
- `fa-IR`: Persian (Iran)
- `fi-FI`: Finnish (Finland)
- `fr-CA`: French (Canada)
- `fr-FR`: French (France)
- `he-IL`: Hebrew (Israel)
- `hr-HR`: Croatian (Croatia)
- `hu-HU`: Hungarian (Hungary)
- `it-IT`: Italian (Italy)
- `ja-JP`: Japanese (Japan)
- `ko-KR`: Korean (South Korea)
- `mk-MK`: Macedonian (Macedonia)
- `nb-NO`: Norwegian Bokmål (Norway)
- `nl-NL`: Dutch (Netherlands)
- `pl-PL`: Polish (Poland)
- `pt-BR`: Portuguese (Brazil)
- `ru-RU`: Russian (Russia)
- `sv-SE`: Swedish (Sweden)
- `tr-TR`: Turkish (Turkey)
- `uk-UA`: Ukrainian (Ukraine)
- `zh-CN`: Chinese (China)
- `zh-TW`: Chinese (Taiwan)

*Example where we enforce Hungarian language:*
~~~
year        | apple | pear
----------- | ----- | -----
2019        | 2     | 3
2020        | 4     | 6

xAxisType: date
customLocale: hu-HU
~~~

### legendOrientation
- **Type:** `vertical` or `horizontal` 
- **Default:** `horizontal` 



### legendTitle
- **Type:** any `string` 
- **Default:** none



### xAxisType
- **Type:** `number` or `date` or  `category` 
- **Default:** autodetected

It supports 3 types of data:
- `number`: numerical value as a continuous range
- `date`: date value as a continuous range
- `category`: string value as a discrete range

*Example where we enforce a `date` type with the normal syntax:*
~~~
year        | apple | pear
----------- | ----- | -----
2019        | 2     | 3
2020        | 4     | 6

xAxisType: date
~~~


Note that you can also pass this option by providing it in square bracket `[]` in the first cell of the table.
*Example where we enforce a `date` type with the square bracket `[]` syntax:*
~~~
year [date] | apple | pear
----------- | ----- | -----
2019        | 2     | 3
2020        | 4     | 6
~~~

### xAxisFormat
- **Type:** see [d3-format](https://github.com/d3/d3-format) for `number` xAxisType and [d3-time-format](https://github.com/d3/d3-time-format) for `date` xAxisType
- **Default:** none

### yAxisFormat
- **Type:** see [d3-format](https://github.com/d3/d3-format) for `number` xAxisType and [d3-time-format](https://github.com/d3/d3-time-format) for `date` xAxisType
- **Default:** none

### xAxisNbOfTicks
- **Type:** positive `number`
- **Default:** autodetected

### yAxisNbOfTicks
- **Type:** positive `number`
- **Default:** autodetected

### xAxisOrigin
- **Type:** `from zero` or `from data boundaries`
- **Default:** `from data boundaries`

*Note:* This option is ignored for `date` and `category` type x-axis.

### yAxisOrigin
- **Type:** `from zero` or `from data boundaries`
- **Default:** `from data boundaries`


## Units
The unit for the x-axis is the full string of the first cell of the header.
The units for the y-axis are the string in parentheses `()` of each subsequent cells of the header.

## Comments
Any string surrounded by `<!--` and `-->` will be ignored by the plugin.

*Example of a table with comments:*
~~~
year  <!--this is a comment -->      | apple | pear
-----------------------------------  | ----- | -----
2019                                 | 2     | 3 <!-- another comment --> 
2020                                 | 4     | 6
~~~

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