I have to draw a bar graph with two data sets and I want to label each set (in X axis) with a text. Below code produces:

As can be seen, labels are auto generated, i.e. 0 and 1 (highlighted in yellow color). But I want to change 0 and 1 to a two text values, say, P1 and P2.

var chart = c3.generate({
  bindto: '#bar',
  data: {
    columns: [
      ['A1', 30, 200],
      ['A2', 130, 100],
      ['A3', 12, 59],
      ['A4', 42, 25],
      ['A5', 76, 84],
      ['A6', 83, 14],
      ['A7', 54, 87],
      ['A8', 110, 40],
      ['A9', 34, 48]
    ],
    type: 'bar'
  },
  bar: {
    width: {
      ratio: 0.5
    }
  }
});

<script src=".4.11/d3.min.js"></script>
<script src=".3.0/c3.min.js"></script>
<link href=".3.0/c3.css" rel="stylesheet"/>

<div id="bar">
</div>

I have to draw a bar graph with two data sets and I want to label each set (in X axis) with a text. Below code produces:

As can be seen, labels are auto generated, i.e. 0 and 1 (highlighted in yellow color). But I want to change 0 and 1 to a two text values, say, P1 and P2.

var chart = c3.generate({
  bindto: '#bar',
  data: {
    columns: [
      ['A1', 30, 200],
      ['A2', 130, 100],
      ['A3', 12, 59],
      ['A4', 42, 25],
      ['A5', 76, 84],
      ['A6', 83, 14],
      ['A7', 54, 87],
      ['A8', 110, 40],
      ['A9', 34, 48]
    ],
    type: 'bar'
  },
  bar: {
    width: {
      ratio: 0.5
    }
  }
});

<script src="http://cdnjs.cloudflare./ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://cdnjs.cloudflare./ajax/libs/c3/0.3.0/c3.min.js"></script>
<link href="http://cdnjs.cloudflare./ajax/libs/c3/0.3.0/c3.css" rel="stylesheet"/>

<div id="bar">
</div>

I couldn't find a way to assign X-axis labels so far...

• javascript
• charts
• c3.js

1 Answer 1

add axis option to the code

var chart = c3.generate({
  bindto: '#bar',
  data: {
    columns: [
      ['A1', 30, 200],
      ['A2', 130, 100],
      ['A3', 12, 59],
      ['A4', 42, 25],
      ['A5', 76, 84],
      ['A6', 83, 14],
      ['A7', 54, 87],
      ['A8', 110, 40],
      ['A9', 34, 48]
    ],
    type: 'bar'
  },
  bar: {
    width: {
      ratio: 0.5
    }
  },
  axis: {
    x: {
      type: 'category',
      categories: ['cat1', 'cat2']
    }
  }
});

<script src="http://cdnjs.cloudflare./ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://cdnjs.cloudflare./ajax/libs/c3/0.3.0/c3.min.js"></script>
<link href="http://cdnjs.cloudflare./ajax/libs/c3/0.3.0/c3.css" rel="stylesheet" />

<div id="bar">
</div>