In nvd3 line chart, showMaxMin:true is not working

Question

Hello guys I have implemented NVD3 line chart in my application, I have ticks like "January,February..till..December" on the X axis, Chart is getting drawn perfectly, But the x axis ticks are not being render as it is. Please help me get the solution, Here is what I have done and the snapshot of the line chart I could draw,

JSP Code:

<nvd3 options="options" data="dataForLineChart"></nvd3>

Controller:

$scope.options = {
        chart: {
            type: 'lineChart',
            showXAxis:true,
            height: 300,
            margin : {
                top: 20,
                right: 20,
                bottom: 40,
                left: 55
            },
            x: function(d){ return d.x; },
            y: function(d){ return d.y; },
            useInteractiveGuideline: false,
            dispatch: {
                stateChange: function(e){ console.log("stateChange"); },
                changeState: function(e){ console.log("changeState"); },
                tooltipShow: function(e){ console.log("tooltipShow"); },
                tooltipHide: function(e){ console.log("tooltipHide"); }
            },
            xAxis: {
                axisLabel: 'Timeline(months)',
                showMaxMin: false
            },
            yAxis: {
                axisLabel: 'Rate of aquisition',
                tickFormat: function(d){
                    return d3.format('')(d);
                },
                axisLabelDistance: -8
            },
            callback: function(chart){
                console.log("!!! lineChart callback !!!");
            },
            showLegend : false

        }
    }

Data I am providing is:

$scope.dataForLineChart =  
    [{
      "key": "3",
       "values":[{
        "x": "0",
        "y": "57.0"
       }, {
        "x": "1",
        "y": "67.0"
       }, {
        "x": "2",
        "y": "40.0"
       }, {
        "x": "3",
        "y": "20.0"
       }, {
        "x": "4",
        "y": "10.0",
       }, {
        "x": "5",
        "y": "40.0"
       }, {
        "x": "6",
        "y": "57.0",
       }, {
        "x": "7",
        "y": "44.0"
       }, {
        "x": "8",
        "y": "23.0"
       }, {
        "x": "9",
        "y": "75.0"
       }, {
        "x": "10",
        "y": "22.0"
       }, {
        "x": "11",
        "y": "12.0"
       }]
      }];

And finally here is how my chart looks like Why All the 12 month are not getting rendered

After making width to 800:

Where are the rest of the digits gone,??? Can that be a html issue? — Vish

Sajeetharan Sajeetharan · Accepted Answer · 2017-01-04T15:49:35

Actually it works, it shows all the values on the x axis, just resize the chart and see,

it happens because it automatically resize the axes when you resize the chart. just change the width to 800, you could see.

DEMO

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
  $scope.options = {
    chart: {
      type: 'lineChart',
      showXAxis: true,
      height: 300,
      width:800,
      margin: {
        top: 20,
        right: 20,
        bottom: 40,
        left: 55
      },
      x: function(d) {
        return d.x;
      },
      y: function(d) {
        return d.y;
      },
      useInteractiveGuideline: false,
      dispatch: {
        stateChange: function(e) {
          console.log("stateChange");
        },
        changeState: function(e) {
          console.log("changeState");
        },
        tooltipShow: function(e) {
          console.log("tooltipShow");
        },
        tooltipHide: function(e) {
          console.log("tooltipHide");
        }
      },
      
      xAxis: {
        axisLabel: 'Timeline(months)',
        showMaxMin: false,
           },
      yAxis: {
        axisLabel: 'Rate of aquisition',
        tickFormat: function(d) {
          return d3.format('')(d);
        },
        axisLabelDistance: -8
      },
      callback: function(chart) {
        console.log("!!! lineChart callback !!!");
      },
      showLegend: false

    }
  }

  $scope.dataForLineChart = [{
    "key": "3",
    "values": [{
      "x": "0",
      "y": "57.0"
    }, {
      "x": "1",
      "y": "67.0"
    }, {
      "x": "2",
      "y": "40.0"
    }, {
      "x": "3",
      "y": "20.0"
    }, {
      "x": "4",
      "y": "10.0",
    }, {
      "x": "5",
      "y": "40.0"
    }, {
      "x": "6",
      "y": "57.0",
    }, {
      "x": "7",
      "y": "44.0"
    }, {
      "x": "8",
      "y": "23.0"
    }, {
      "x": "9",
      "y": "75.0"
    }, {
      "x": "10",
      "y": "22.0"
    }, {
      "x": "11",
      "y": "12.0"
    }]
  }];
});

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3  Discrete Bar Chart</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">    
    <nvd3 options="options" data="dataForLineChart"></nvd3>    
    <br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
  </body>

</html>

In nvd3 line chart, showMaxMin:true is not working

2 Answers