Defining a category axis using c3.js

Question

I just started using c3.js and I haven`t figure out how to specify the values of ticks in x axis. The values are type1, type2, type3... and here is my code:

    $(document).ready(function(){
      var mammoReconstructionsAcceptedChart = c3.generate({
        bindto: '#mammo_reconstructions_accepted',
        data: {
          x: 'x',
          columns: [
            ['x', 'type1', 'type2', 'type3', 'type4', 'type5', 'type6'],
            ['data1', 30, 200, 100, 400, 150, 250]
          ]
        },
        axis: {
          x: {
            tick: { format: d3.format("") }
          }
        }
      });
    });

I updated the title. You want a ***category*** axis rather than a ***linear*** nor a ***time*** axis. — Mr. Polywhirl, May 21 '15 at 14:28

score 3 · Accepted Answer · answered May 21 '15 at 14:34

This works perfectly fine. I based it off of the Category Axis Example on C3.js's website.

$(document).ready(function() {
  var mammoReconstructionsAcceptedChart = c3.generate({
    bindto: '#mammo_reconstructions_accepted',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250]
      ]
    },
    axis: {
      x: {
        type: 'category',
        categories: ['type1', 'type2', 'type3', 'type4', 'type5', 'type6']
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />

<div id="mammo_reconstructions_accepted"></div>

That worked perfectly. Thanks [Mr. Polywhirl](http://stackoverflow.com/users/1762224/mr-polywhirl) — AlexLarra, May 21 '15 at 14:38

Defining a category axis using c3.js

1 Answers1