support x axis label rotation

[sant0s]

see example at https://c3js.org/samples/axes_x_tick_rotate.html

[ggrossetie]

This is really specific to C3.js so we should probably introduce a specific option.

Since I don't want to introduce a DSL on top of C3.js we should probably read a JSON file and merge it before calling c3.generate.

Alternatively, we could use an header (similar to front matter) to configure the chart:

[chart,line,engine=c3js]
....
---
{
    axis: {
        x: {
            tick: {
                rotate: 75,
                multiline: false
            },
            height: 130
        }
    }
}
---
January,February,March,April,May,June,July
28,48,40,19,86,27,90
65,59,80,81,56,55,40
....

[ggrossetie]

Using YAML syntax:

[chart,line,engine=c3js]
....
---
axis:
  x:
    tick:
      rotate: 75
      multiline: false
    height: 130
---
January,February,March,April,May,June,July
28,48,40,19,86,27,90
65,59,80,81,56,55,40
....

Using TOML syntax:

[chart,line,engine=c3js]
....
---
[axis.x]
height = 130
tick.rotate = 75
tick.multiline = false
---
January,February,March,April,May,June,July
28,48,40,19,86,27,90
65,59,80,81,56,55,40
....

[wangzhaohe]

@Mogztter Please have a check on my image, not the right one.

[chart,line,engine=c3js]
....
---
{
    axis: {
        x: {
            tick: {
                rotate: 75,
                multiline: false
            },
            height: 130
        }
    }
}
---
January,February,March,April,May,June,July
28,48,40,19,86,27,90
65,59,80,81,56,55,40
....

html content created by asciidoctor -r asciidoctor-chart aaa.adoc:

<script>
  c3.generate({
    bindto: '#chartEILZHEWL',
    size: { height: 400, width: 600 },
    data: {
      columns: [["0", "{"], ["1", "    axis: {"], ["2", "        x: {"], ["3", "            tick: {"], ["4", "                rotate: 75"], ["5", "                multiline: false"], ["6", "            }"], ["7", "            height: 130"], ["8", "        }"], ["9", "    }"], ["10", "}"], ["11", "---"], ["12", "January", "February", "March", "April", "May", "June", "July"], ["13", "28", "48", "40", "19", "86", "27", "90"], ["14", "65", "59", "80", "81", "56", "55", "40"]],
      names: {}
    },
    axis: {
      x: {
        type: 'category',
        categories: ["---"],
        label: ''
      },
      y: {
        label: ''
      }
    }
  })
</script>