nvd3 discreteBarChart y轴标签

Question

I am using the following code to set the label in y-axis for discrete bar chart in nvd3 but it doesn't show the label for y-axis. BTW, x-axis label works fine.

chart.yAxis.axisLabel('Students (in %)');

Answer 1

One thing to watch out for is that if the chart.margin value is too small on the left, there won't be enough room for the label to display. You can either adjust the chart.margin value or move the y-axis label closer to the chart by adjusting the axisLabelDistance option:

chart.yAxis
    .axisLabel('Students (in %)')
    .axisLabelDistance(40);

Answer 2

The following works:

nv.addGraph(function() {
  var chart = nv.models.discreteBarChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .staggerLabels(true)
      .tooltips(false)
      .showValues(true)

  chart.yAxis.axisLabel("Students (in %)")

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

  nv.utils.windowResize(chart.update);

  return chart;
});

You might have a typo somewhere.

Answer 3

For discrete bar chart, you can customize your chart options as shown below. You don't need to use all of this options for creating the chart model in you javascript code. It is quite enough to set up only the features you want to change and the others will take the default value.

 'use strict'; angular.module('mainApp.controllers') .controller('discreteBarChartCtrl', function($scope){ $scope.options = { chart: { type: 'discreteBarChart', height: 450, margin : { top: 20, right: 20, bottom: 50, left: 55 }, x: function(d){return d.label;}, y: function(d){return d.value;}, showValues: true, valueFormat: function(d){ return d3.format(',.4f')(d); }, duration: 500, xAxis: { axisLabel: 'X Axis' }, yAxis: { axisLabel: 'Y Axis', axisLabelDistance: -10 } } }; $scope.data = [ { key: "Cumulative Return", values: [ { "label" : "A" , "value" : -29.765957771107 } , { "label" : "B" , "value" : 0 } , { "label" : "C" , "value" : 32.807804682612 } , { "label" : "D" , "value" : 196.45946739256 } , { "label" : "E" , "value" : 0.19434030906893 } , { "label" : "F" , "value" : -98.079782601442 } , { "label" : "G" , "value" : -13.925743130903 } , { "label" : "H" , "value" : -5.1387322875705 } ] } ] })