chart plugin for markdown-it.
npm install markdown-it-chartsEnglish | 简体中文
> Chart plugin for markdown-it. Fast and easy to extend markdown-it.
> support chart.js、echarts、highcharts、CHARTIST、c3.js、tauCharts.
node.js & bower:
```
npm install markdown-it-charts --save
bower install markdown-it-charts --save
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`
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`
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`
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
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
If you have a bug or an idea, open issues here