Reverse X Axis on Timeseries

[nateobray]

I may be missing something and could not figure out how, but is it possible to reverse the axis on a time series so that the newest date is on the left and the oldest is on the right?

[bjlbernal]

Two ways that I can think of.

1. To order it before passing it in to the config.
2. Pass a sorting function to the data.order parameter.

[nateobray]

Here's a JSFiddle to demonstrate my problem: http://jsfiddle.net/sxwRR/

I believe that even if I order my data before passing it in, it is still charted oldest date to the left and newest to the right when axis.x.type is set to timeseries. I believe this is the first way you are referring to?

I will look into the second, I'm not familiar with the sorting function.

[masayuki0812]

Hi, Sorry currently it is not possible to reverse x axis. We need to implement as a new feature.

[dragosrususv]

Any news on this one?

[DigTheDoug]

You can get interesting and achieve this in the meantime easily using CSS a transform by flipping the X axis of the graph, and then re-flipping any classes that have text on them:

.c3{
     transform: rotateX( 180deg );
     .c3-axis-x {
         text {
             transform: rotateX(180deg);
         }
     }
 }

I did this to achieve a timeseries rotated bar graph where the most recent months are at the top.

[euginio]

Another workaround https://stackoverflow.com/questions/25938040/how-to-sort-x-axis-in-desc-order/26047522#26047522

About the second option @bjlbernal mention (data.order function), this seems to be just for grouped charts (pie, donuts, stacked barcharts) http://c3js.org/reference.html#data-order

[guptavijay208]

Any news on this one, do we have any option now to show the latest date on the left?

[chwahab]

My Solution

http://jsfiddle.net/1y8xk0g7/2/

/* Original Data: */
var originalLabels = [1559242800000, 1559246400000, 1559250000000, 1559253600000, 1559257200000, 1559260800000];
var originalData = ["200", "40", "1.776", "80", "149", "138"];


// make a fake mapping
var inverseTimeMapping = {}
var timeLength = originalLabels.length - 1

originalLabels.forEach(function(label, i) {
  inverseTimeMapping[label.toString()] = originalLabels[timeLength - i]
});

//Reverse Orignal Data
var reverseData = ["200", "40", "1.776", "80", "149", "138"].reverse();
console.log(reverseData);
c3.generate({
  bindto: '#chart-reverse',
  data: {
    x: 'x',
    columns: [
      ["x"].concat(originalLabels),
      // Here we invert that data
      ["Air Quality"].concat(reverseData)
    ],
    colors: {
      'Air Quality': 'black',
    }
  },
  size: {
    height: 190
  },
  axis: {
    x: {
      type: 'timeseries',
      tick: {
        format(d) {
          var timstamp = moment(d).valueOf();
          var inverseTimestamp = inverseTimeMapping[timstamp.toString()];
          return moment(inverseTimestamp).format("LT")
        }
      }
    },
    y2: {
      show: false
    }
  }
});


c3.generate({
  bindto: '#chart-original',
  data: {
    x: 'x',
    columns: [
      ["x"].concat(originalLabels),
      ["Air Quality"].concat(originalData)
    ],
    colors: {
      'Air Quality': 'black',
    }
  },
  size: {
    height: 190
  },
  axis: {
    x: {
      type: 'timeseries',
      tick: {
        format(d) {
          var timstamp = moment(d).valueOf();
          return moment(timstamp).format("LT")
        }
      }
    },
    y2: {
      show: false
    }
  }
});