English | 简体中文

markdown-it-charts

> Chart plugin for markdown-it. Fast and easy to extend markdown-it.
> support chart.js、echarts、highcharts、CHARTIST、c3.js、tauCharts.

Install

node.js & bower:

``
npm install markdown-it-charts --save
bower install markdown-it-charts --save
`

Usage examples

$3

node.js

> token.info is chart

`js
var markdownIt = require("markdown-it");
var markdownItCharts = require("markdown-it-charts");
const md = new markdownIt();
md.use(markdownItCharts);
md.render(\\\chart
{
"type": "pie",
"data": {
"labels": [
"Red",
"Blue",
"Yellow"
],
"datasets": [
{
"data": [
300,
50,
100
],
"backgroundColor": [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
"hoverBackgroundColor": [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}
]
},
"options": {}
}
\\\);
`

Browser

`js



`

Documentation for charts

$3

node.js

> token.info is echarts

`js
var markdownIt = require("markdown-it");
var markdownItCharts = require("markdown-it-charts");
const md = new markdownIt();
md.use(markdownItCharts);
md.render(\\\echarts
{
"option": {
"xAxis": {
"type": "category",
"data": [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
"Sun"
]
},
"yAxis": {
"type": "value"
},
"series": [
{
"data": [
820,
932,
901,
934,
1290,
1330,
1320
],
"type": "line"
}
]
}
}
\\\);
`


Browser

`js



`

Documentation for echarts

$3

node.js

> token.info is chartist

`js
var markdownIt = require("markdown-it");
var markdownItCharts = require("markdown-it-charts");
const md = new markdownIt();
md.use(markdownItCharts);
md.render(\\\chartist
{
"chartist":{
"data":{
"labels": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
"series": [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
},
"options":{
"fullWidth": true,
"chartPadding": {
"right": 40
}
}
}
\\\);
`


Browser

`js




`

Documentation for chartist

$3

node.js

> token.info is c3
>
> unique id is required

`javascript
var markdownIt = require("markdown-it");
var markdownItCharts = require("markdown-it-charts");
const md = new markdownIt();
md.use(markdownItCharts);
md.render(\\\c3
{
"id":"c3-1",
"data": {
"columns": [
["sample", 30, 200, 100, 400, 150, 250]
]
},
"axis": {
"y": {
"max": 400,
"min": -400
}
}
}
\\\);
`

Browser

`javascript


// c3.js is rely on d3.js



`

Documentation for C3.js

$3

node.js

> token.info is c3

> unique id is required

`javascript
var markdownIt = require("markdown-it");
var markdownItCharts = require("markdown-it-charts");
const md = new markdownIt();
md.use(markdownItCharts);
md.render(\\\taucharts
{
"id":"tauchartsid-1",
"type": "stacked-area",
"x": "date",
"y": "effort",
"color": "team",
"data": [
{"team": "Alpha", "date": "2015-07-15", "effort": 400},
{"team": "Alpha", "date": "2015-07-16", "effort": 200},
{"team": "Alpha", "date": "2015-07-17", "effort": 300},
{"team": "Alpha", "date": "2015-07-18", "effort": 500},
{"team": "Beta", "date": "2015-07-15", "effort": 100},
{"team": "Beta", "date": "2015-07-16", "effort": 200},
{"team": "Beta", "date": "2015-07-17", "effort": 300},
{"team": "Beta", "date": "2015-07-18", "effort": 100},
{"team": "Gamma", "date": "2015-07-15", "effort": 300},
{"team": "Gamma", "date": "2015-07-16", "effort": 100},
{"team": "Gamma", "date": "2015-07-17", "effort": 100},
{"team": "Gamma", "date": "2015-07-18", "effort": 200}
]
}
\\\);
`

Browser

`javascript




// taucharts.js is rely on d3.js
// But there is an incompatibility issue caused by version D3.js

``

Documentation for tauCharts

$3

If you have a bug or an idea, open issues here