NVD3.js - Missing X-Axis Ticks

StackOverflow https://stackoverflow.com/questions/20550344

  •  01-09-2022
  •  | 
  •  

Question

I just started using NVD3.js for a data visualization task I am working on. http://nvd3.org/

I am creating a polylinear line chart with 3 different series: http://i.imgur.com/3I10aBD.png

I am having an issue with my x-axis labels. First of all, the guidelines are not lining up correctly. I think this is because the x-min and x-max values are overlapping with the ticks, making everything off by one. Also, certain dates in the series are missing from the ticks (i.e. 12/6 is missing in this example, even though it is defined in my dataset). I'm pretty sure this is because nvd3js defaults to 10 ticks per axis.

I tried specifying a tick count using chart.xAxis.ticks(12) but that seemed to do nothing.

Questions

  • How do I setup the min and max x-axis ticks correctly so they don't interfere with my ticks and the guidelines will line up? (i.e. 12.01 and 12.12 in bold in my image)

  • How can I force all of the x-axis ticks to be displayed, not just 10 chosen by nvd3?

Code:

<!DOCTYPE html>
<meta charset="utf-8">

<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<link href="teststyle.css" rel="stylesheet" type='text/css'>
<style>
#chart13, #chart14 {
   overflow: scroll;
   width: 500px;
   height: 300px;
}

#chart13 svg, #chart14 svg {
  width: 700px;
  height: 400px;
}
</style>
<body>
  <h3>Line Chart</h3>
  <div style='position:relative;'>
  <div class='chart full' id='chart10'>
    <svg></svg>
  </div>
</div>

<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/interactiveLayer.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/scatter.js"></script>
<script src="../src/models/line.js"></script>
<script src="../src/models/lineChart.js"></script>
<script>

var dataset = [{"values":[{"x":1385874000000,"y":"690558"},{"x":1385960400000,"y":"607800"},{"x":1386046800000,"y":"740914"},{"x":1386133200000,"y":"885053"},{"x":1386219600000,"y":"862322"},{"x":1386306000000,"y":"814503"},{"x":1386392400000,"y":"929606"},{"x":1386478800000,"y":"680305"},{"x":1386565200000,"y":"595698"},{"x":1386651600000,"y":"734257"},{"x":1386738000000,"y":"835216"},{"x":1386824400000,"y":"1101351"}],"key":"Num Processed","color":"#e41a1c","area":true},{"values":[{"x":1385874000000,"y":"68494"},{"x":1385960400000,"y":"53720"},{"x":1386046800000,"y":"86944"},{"x":1386133200000,"y":"99616"},{"x":1386219600000,"y":"91489"},{"x":1386306000000,"y":"89277"},{"x":1386392400000,"y":"78585"},{"x":1386478800000,"y":"60501"},{"x":1386565200000,"y":"44796"},{"x":1386651600000,"y":"73843"},{"x":1386738000000,"y":"89011"},{"x":1386824400000,"y":"120769"}],"key":"Num Added","color":"#377eb8","area":true},{"values":[{"x":1385874000000,"y":"1886"},{"x":1385960400000,"y":"1698"},{"x":1386046800000,"y":"2896"},{"x":1386133200000,"y":"3301"},{"x":1386219600000,"y":"3111"},{"x":1386306000000,"y":"3109"},{"x":1386392400000,"y":"2492"},{"x":1386478800000,"y":"1921"},{"x":1386565200000,"y":"1488"},{"x":1386651600000,"y":"2010"},{"x":1386738000000,"y":"3402"},{"x":1386824400000,"y":"2650"}],"key":"Num DNS Added","color":"#984ea3","area":true}];

d3.select("body").on("keydown",function() {
  if (d3.event.ctrlKey && d3.event.which === 75) {
     alert("keydowned");
  }
});

defaultChartConfig("chart10", dataset, true, true);

function defaultChartConfig(containerid, data, guideline, useDates, auxOptions) {
  if (auxOptions === undefined) auxOptions = {};
  if (guideline === undefined) guideline = true;
  nv.addGraph(function() {
var chart;
chart = nv.models.lineChart().useInteractiveGuideline(guideline);

var fullChartHeight = 500 - chart.margin().top - chart.margin().bottom;

chart
  .x(function(d,i) { 
    return d.x;
  })
  .yDomain([0, 1000, 4000, 100000, 5000000])   //Using a polylinear scale
  .yRange([fullChartHeight, 375, 250, 125, 0]);

if (auxOptions.width) 
  chart.width(auxOptions.width);

if (auxOptions.height)
  chart.height(auxOptions.height);

if (auxOptions.forceY) 
  chart.forceY([0]);

chart.margin({right: 40, left: 100});

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



chart.yAxis
    .axisLabel('Amount');

d3.select('#' + containerid + ' svg')
    .datum(data)
    .call(chart);

nv.utils.windowResize(chart.update);

return chart;
  });
}

</script>
Was it helpful?

Solution

To get the axis right, you need to pass Date objects to NVD3. That is, instead of

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

do

chart
  .x(function(d,i) { 
    return new Date(d.x);
  })

Then you also don't need to do that in the .tickFormat anymore. As for the ticks, the only way to force showing all the tick values is to set them explicitly using .tickValues(). See this question for some more information.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top