How to edit C3.js line chart tick format to show a specific type of label

Question

How can I edit the x-axis tick format on my c3.js line graph to show a 'year-year' format?

I'm building a graph to show the rising use of food banks, but the data I've received is for financial years e.g. Apr 2019 - Mar 2020 instead of calendar year.

However, I can't work out how to make my x-axis label format as a 'year-year' e.g. '2019-2020'. The most I've been able to make it show is '2019-2019'.

Please find my code below. Any advice would be appreciated!

<script type="text/javascript" src="js/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/c3.min.js"></script>
<style media="screen">

.container {
    max-width:700px;
    margin: 0 auto;
    font-family: Helvetica;
    line-height: 1.4em;
}

  #chart1 {
    max-width: 690px;
    margin: 0 auto;
    font: 16px sans-serif;
  }
</style></head>

<div id="chart1"></div>

<script type="text/javascript">
var foodparcels = ['Emergency three day food supplies given out by The Trussell Trust food banks',25899,40898,61468,128697,346992,913138,1084604,1109309,1182954,1332952,1583668,1900122]
var years = ['year','2008-2009','2009-2010','2010-2011','2011-2012','2012-2013','2013-2014','2014-2015','2015-2016','2016-2017','2017-2018','2018-2019','2019-2020'];

var chart = c3.generate({
    bindto: '#chart1',
    padding: {
              top: 10,
              right: 40,
              bottom: 10,
              left: 80,
              },

    size: {
            height: 320,
          },
    data: {
      x:'year',
      columns: [years,foodparcels],
      xFormat: '%Y-%Y'
    },
    axis: {
      x: {
          type: 'timeseries',
          tick: {
              format: '%Y-%m',
              count: 12,
              outer: false
              // centered: true
                }
          },
      y : {
        tick: {
            yformat:d3.format(" "),
            outer: false,
            }
        },
    },
    legend: {
      position: 'bottom'
    },
    color: {
      pattern: ['#FBB43F']
    },
    point: {
      show: true
    },
    grid: {
      x: {
 show: false
      }
          }
});

</script>

question from:https://stackoverflow.com/questions/65850901/how-to-edit-c3-js-line-chart-tick-format-to-show-a-specific-type-of-label

Answer 1

how about using categories axis instead of timeseries? https://c3js.org/samples/categorized.html

Your x-lables are not exactly timeseries.

example https://jsfiddle.net/vtakr1e2/5/

var foodparcels = ['Emergency three day food supplies given out by The Trussell Trust food banks',25899,40898,61468,128697,346992,913138,1084604,1109309,1182954,1332952,1583668,1900122]
var years = ['2008-2009','2009-2010','2010-2011','2011-2012','2012-2013','2013-2014','2014-2015','2015-2016','2016-2017','2017-2018','2018-2019','2019-2020'];

var chart = c3.generate({
    bindto: '#chart1',
    padding: {
              top: 10,
              right: 40,
              bottom: 10,
              left: 80,
              },

    size: {
            height: 320,
          },
    data: {
      columns: [foodparcels]
    },
    axis: {
      x: {
          type: 'category',
          categories: years,
          tick: {
      rotate: 45
    }
          
          },
      y : {
        tick: {
            yformat:d3.format(" "),
            outer: false,
            }
        },
    },
    legend: {
      position: 'bottom'
    },
    color: {
      pattern: ['#FBB43F']
    },
    point: {
      show: true
    },
    grid: {
      x: {
 show: false
      }
          }
});

.container {
    max-width:700px;
    margin: 0 auto;
    font-family: Helvetica;
    line-height: 1.4em;
}

  #chart1 {
    max-width: 690px;
    margin: 0 auto;
    font: 16px sans-serif;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>

<div id="chart1"></div>