gitbook-plugin-chart
Using C3.js or Highcharts chart library in Gitbook.
Config
Chart Library
Config in book.json
:
type
can be c3
or highcharts
, default to c3
.
Usage
Insert block in your markdown file.
Caution: the content of the blocks should be written in pure JSON. That is, each property should be quoted, and you should strictly use double quotes "
, not single quotes '
:
// Invalid JSON{ data: { type: 'bar' }} // Valid JSON{ "data": { "type": "bar" }}
See the examples below.
C3.js
Example forYou SHOULD NOT specify the bindto
property for the chart.
{% chart %}
{
"data": {
"type": "bar",
"columns": [
["data1", 30, 200, 100, 400, 150, 1500, 2500],
["data2", 50, 100, 300, 450, 650, 250, 1320]
]
},
"axis": {
"y": {
"tick": {
"format": d3.format("$,")
}
}
}
}
{% endchart %}
Getting Start with C3.js.
YAML
Example for C3.js in{% chart format="yaml" %}
data:
type: bar
columns:
- [data1, 30, 200, 100, 400, 150, 250]
- [data2, 50, 20, 10, 40, 15, 25]
axes:
data2: y2
axis:
y2:
show: true
{% endchart %}
Highcharts
Example forYou SHOULD NOT specify the renderTo
property for the chart.
{% chart %}
{
"chart": {
"type": "bar"
},
"title": {
"text": "Fruit Consumption"
},
"xAxis": {
"categories": ["Apples", "Bananas", "Oranges"]
},
"yAxis": {
"title": {
"text": "Fruit eaten"
}
},
"series": [{
"name": "Jane",
"data": [1, 0, 4]
}, {
"name": "John",
"data": [5, 7, 3]
}]
}
{% endchart %}
Getting Start with Highcharts.
Development
Learn more about Gitbook Plugin
Prepare
Testing your plugin on your book before publishing it is possible using npm link.
In the plugin's folder, run:
npm link
Then in the test folder:
npm link gitbook-plugin-chart
Start
In the plugin's folder, run:
npm run dev
Then in the test folder:
npm start