Skip to content


Subversion checkout URL

You can clone with
Download ZIP


[Line Chart] How to create an ordinal/discrete xAxis? #29

lestopher opened this Issue · 6 comments

7 participants


I thought that I could set scale of the axis by doing the following:

  var chart;
  var xScale = d3.scale.ordinal()
                  .domain([0].values, function(d) {
                    return d.x;
                  // .rangeBands([0, seriesDef[0].values.length - 1]);

  nv.addGraph(function() {
    chart = nv.models.lineChart();

    chart.x(function(d, i) { return String(d.x); })
         .y(function(d) { return d.y; });




    return chart;

Here's what seriesDef looks like:

  "area": false,
  "key": "Total Amount By Term",
        "x": "199520",
        "y": 1119707
        "x": "199510",
        "y": 1253042
        "x": "199610",
        "y":  868849
        "x": "199540",
        "y": 50
        "x": "199430",
        "y":  6803
        "x": "199810",
        "y":  1850
        "x": "200820",
        "y":  30

The xAxis still ends up looking like an interval

Any suggestions?


I'm having a similar problem, I want an x axis with a d3.time.scale() scale, I thought I could do what you've done to set the axis scale but it doesn't work.

@arlm arlm referenced this issue from a commit in arlm/nvd3
@bobmonteverde bobmonteverde Issue #29 removing deprected bar example 5beda82

Any update on the original question?


Similar question here. Eventually posted a question on SO:


Anyone know how to do this?


Many thanks to @dgorissen for the work-around. Just mentioning that this would be ideal to support within NVD3 core for future releases.


Don't use an ordinal scale.

Instead, set chart.x(function(d,i){ return i;})
And then in the chart.xAxis.tickFormat function, return the label you want to show depending on the index.

@robinfhu robinfhu closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.