Using C3.js or Highcharts chart library in Gitbook.
Config in book.json:
{
"plugins": [ "chart" ],
"pluginsConfig": {
"chart": {
"type": "highcharts"
}
}
}type can be c3 or highcharts, default to c3.
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.
Example for C3.js
You 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.
Example for C3.js in YAML
{% 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 %}
Example for Highcharts
You 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.
Learn more about Gitbook Plugin
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
In the plugin's folder, run:
npm run dev
Then in the test folder:
npm start