c3.js | problems setting x-axis tick text

Question

Following the examples from the C3.js website, I am trying to provide custom labels for the x-axis on a chart.

The outcome should look like this: desired-output

I have tried following the example 'X Axis Tick Values' provided by C3.js:c3js.org/samples/axes_x_tick_values.html.

I have tried this using both 'timeseries' and 'category' (to no avail) per this example: ...c3js.org/samples/categorized.html

Here's one of my attempts on JS Fiddle: https://jsfiddle.net/qvsdvh8w/9/

And here's the javascript:

var chart = c3.generate({
  bindto: '#chart',
  data: {
    x: 'x',
    columns: [
      ['x', 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017],
      ['open cases', 0, 7, 10, 12, 14, 19, 12, 17, 19, 18, 23, 24, 33, 42, 54, 63, 52, 51],
      ['total budget', 0, 1359300, 1700900, 2248200, 2417400, 2966846, 2966846, 2658700, 3009082, 3919996, 4212200, 4319972, 4882937, 5026751, 5671243, 5059538, 5896239, 6289674]
    ],
    axes: {
      'total budget': 'y2'
    },
    types: {
      'open cases': 'bar' // ADD
    }
  },
  axis: {
    y: {
      label: {
        text: 'open cases',
        position: 'outer-middle'
      }
    },
    y2: {
      show: true,
      label: {
        text: 'total budget',
        position: 'outer-middle'
      }
    }
  },
  x: {
    type: 'timeseries',
    tick: {
      values: ['FY00', 'FY01', 'FY02', 'FY03', 'FY04', 'FY05', 'FY06', 'FY07', 'FY08', 'FY09', 'FY10', 'FY11', 'FY12', 'FY13', 'FY14', 'FY15', 'FY16', 'FY17']
    },
  },
});

I also tried labeling following the method shown here, where the string values are provided in the x-axis data column.

...c3js.org/samples/axes_x_tick_rotate.html

This approach, however, totally destroys the graph:

...jsfiddle.net/qvsdvh8w/11/

Can you please help me to understand what I doing something wrong? Or is this a limitation of C3.js?

Thanks in advance for sharing your knowledge and insights!

Answer 1

I solved this by moving the parameters for the x-axis before those for the y-axis:

https://jsfiddle.net/qvsdvh8w/14/

var chart = c3.generate({
  bindto: '#chart',
  data: {
    x: 'x',
    columns: [
      ['x', 'FY00', 'FY01', 'FY02', 'FY03', 'FY04', 'FY05', 'FY06', 'FY07', 'FY08', 'FY09', 'FY10', 'FY11', 'FY12', 'FY13', 'FY14', 'FY15', 'FY16', 'FY17'],
      //['open cases', 0, 7, 10, 12, 14, 19, 12, 17, 19, 18, 23, 24, 33, 42, 54, 63, 52, 51],//
      ['new eligible cases', 0, 7, 3, 10, 9, 17, 6, 10, 7, 11, 16, 12, 19, 26, 38, 46, 43, 41],
      ['total budget', 0, 1359300, 1700900, 2248200, 2417400, 2966846, 2966846, 2658700, 3009082, 3919996, 4212200, 4319972, 4882937, 5026751, 5671243, 5059538, 5896239, 6289674],
      ['carry-over cases', 0, 0, 7, 2, 5, 2, 6, 7, 12, 7, 7, 12, 14, 16, 16, 17, 9, 10],
      ['expensed contingency', null, null, null, null, 317500, 451500, 428688, 0, 287715, 613107, 768000, 743627, 706836, 753836, 799929, 732580, 877496, 911825]
    ],
    axes: {
      'total budget': 'y2',
      'expensed contingency': 'y2'
    },
    groups: [
      ['carry-over cases', 'new eligible cases']
    ],
    types: {
      //'open cases': 'bar',//
      'carry-over cases': 'bar',
      'new eligible cases': 'bar', // ADD
    }
  },
  axis: {
    x: {
      type: 'category',
      tick: {
        rotate: -45,
        multiline: false
      },
      height: 40
    },
    y: {
      label: {
        text: 'open cases',
        position: 'outer-middle'
      }
    },
    y2: {
      show: true,
      max: 10000000,
      min: 0,
      padding: {
        top: 0,
        bottom: 0
      },
      label: {
        text: 'total budget',
        position: 'outer-middle'
      }
    }
  },
});

... It is, however, unclear to me why it would matter which come first. I'd be happy for insights.

Thank you!