nvd3 discreteBarChart y axis label

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 %)');

Tantra

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);

Lou

Is there a way to do this with the xAxis? chart.margin and axisLabelDistance don't work for me, at least on a multiBarChart(). Thanks – Sadowski

Check out this answer. You can adjust the text direction with the rotate values and the text position with the translate values. – Lou

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.

Blues

For me the axis label doesn't show up on inspection whereas the x axis does – Chewy

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
                    }
                ]
            }
        ]
    })

Cari