gitbook-plugin-chart

Using C3.js or Highcharts chart library in Gitbook.

Config

Chart Library

Config in book.json:

{
  "plugins": [ "chart" ],
  "pluginsConfig": {
      "chart": {
          "type": "highcharts"
      }
  }
}

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.

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.

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