Label X Axis?

[MarcGodard]

Is there a way (in line/area/bar charts) to label the X axis something other than 1,2,3,...?

[MarcGodard]

The following isn't working. What am I doing wrong? I am following the examples perfectly?

<can-component tag="securities-performance-area">
  <style type="less">
    display: block;
    p { font-weight: bold; }
  </style>
  <template>
    <bit-c3>
          <bit-c3-data type="area">
            {{#each dataColumns}}
              <bit-c3-data-column value="{.}" />
            {{/each}}
            <c3-x value="{xKey}" />
          </bit-c3-data>
          <c3-x-axis type="{xType}">
        <c3-tick format="{xTickFormat}" />
      </c3-x-axis>
    </bit-c3>
  </template>
  <script type="view-model" language="text/ecmascript-6">
    import Map from 'can/map/';
    import 'can/map/define/';

    let data1 = new can.List(["data1", 300, 350, 300, 90, 30, 100]),
        data2 = new can.List(["data2", 130, 100, 140, 200, 150, 50]),
        xKey = 'x',
        x = new can.List([xKey, '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06']),
        xType = 'timeseries',
        xTickFormat = '%Y-%m-%d';

    export default Map.extend({
          dataColumns: new can.List([x, data1, data2]),
          xKey: xKey,
          xType: xType,
          xTickFormat: xTickFormat
    });
  </script>
</can-component>

[ilyavf]

To use axis data you can now:

<bit-c3 axis-x-type="category">
    <bit-c3-data>
        <bit-c3-data-column key="dataSet1" value="[1, 2, 3]" axis-x="['x','cat 1','cat 2','cat 3']" />
    </bit-c3-data>
</bit-c3>

This will be translated into:

chart.generate({
    data: { ..., x: 'x'},
    axis: {x: {type: "category"}}
})

Note: "[1,2,3]" is just for illustration. You have to bind a can.List property there as well as for axis-x

[ilyavf]

The above API is just an experiment, you can use it if you you urgently need the feature (just point your package.json to that particular commit).

For the updates on API please watch #19.