# markdown-it-turn-to-chart

> Markdown-it plugin which renders an HTML charts based on markdown or csv tables

Latest version **0.0.2** (published 2022-11-29) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2022-11-29 |
| First published | 2022-10-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Samuel Gagnepain |
| Maintainers | winbee |
| Keywords | markdown, markdown-it, markdown-it-plugin, csv, table, graph, chart, ui |

## Links

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

## Dependencies (2)

- [turn-to-chart](https://npm.io/package/turn-to-chart.md) ^1.0.2
- [markdown-it-fence](https://npm.io/package/markdown-it-fence.md) ^0.1.3

## 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

- 0.0.2 (latest) — 2022-11-29
- 0.0.1 — 2022-10-17

## README

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

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


## Usage example

```typescript
  import MarkdownIt from "markdown-it";
  import turnToChart from "markdown-it-turn-to-chart";

  const input = `
  # Here is a chart
  ----

  \`\`\`turnToChart
  xLabel, series1 (unit1), series2 (unit2)
  0, 2000 , 2000
  1, 4000, 1000
  35, 8000, 2500

  legendTitle: This is a title
  yAxisOrigin: from zero
  \`\`\`

  ----
  > Cool
  ----
  `;

  const mdit = MarkdownIt().use(turnToChart);
  const output = mdit.render(input);
  document.getElementById("app").innerHTML = output;
```

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