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

score 21 · Answer 1 · answered Nov 25 '13 at 17:14

21

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

answered Nov 25 '13 at 17:14

cschroed

6,304
6
42
56

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 – Dolan Antenucci Mar 04 '14 at 22:03
1

Check out [this answer](http://stackoverflow.com/a/13472375/2622934). You can adjust the text direction with the `rotate` values and the text position with the `translate` values. – cschroed Mar 05 '14 at 00:27

Christopher Chiche · Answer 2 · 2014-01-11T23:08:36.463

6

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.

edited Jan 11 '14 at 23:08

answered Jun 25 '13 at 05:12

Christopher Chiche

15,075
9
59
98

For me the axis label doesn't show up on inspection whereas the x axis does – Loveen Dyall Feb 11 '18 at 19:27

Saniya syed qureshi · Answer 3 · 2020-08-07T07:10:40.173

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

nvd3 discreteBarChart y axis label

3 Answers3