CODEWITHSUNDEEP
d3.jsnvd3.js
collenjones
collenjones

Reputation: 530

Invert xAxis for NVD3 MultiBar Chart

How can I invert the xAxis for the NVD3 MultiBar chart? The data is the same (except I had to convert an {x: ... , y: ... } object for the values property to a paired array for the stacked area chart. The data is displaying correctly on the lineChart as well.

FYI, the date data is ordered from latest to earliest in the array but that shouldn't matter for a time scale, right?

// Stacked Area Chart
var renderStackedAreaChart = function(data){
  var newData = convertData(data);

  nv.addGraph(function() {
    var chart = nv.models.stackedAreaChart()
      .x(function(d) { return d[0]; })
      .y(function(d) { return d[1]; })
      .clipEdge(true);

    chart.xAxis
      .tickFormat(function(d) { return d3.time.format('%b')(new Date(d)); });

    chart.yAxis
      .tickFormat(d3.format('$,.2f'));

    d3.select('#graph svg')
      .datum(newData)
        .transition().duration(500).call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
 });
};

// Stacked MultiBar Chart
var renderStackedMultiBar = function(data) {

  nv.addGraph(function() {
    var chart = nv.models.multiBarChart();

    chart.xAxis
      .tickFormat(function(d) { return d3.time.format('%b')(new Date(d)); });

    chart.yAxis
      .tickFormat(d3.format('$,.2f'));

    d3.select('#graph svg')
      .datum(data)
         .transition().duration(500).call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
  });
}

Stacked Area Chart

MultiBar Chart

Upvotes: 0

Views: 1112

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109242

This isn't supported by NVD3 -- you would have to modify the source code. A quick and dirty workaround is (as you've suggested in the comments) to use an ordinal scale instead of a time scale. This way, the order of the values you specify as domain matters and you can simply pass it in in reverse order.

Note that you'll lose the advantages of a time scale this way though, e.g. automatic label format depending on the time range shown.

Upvotes: 1

Related Questions