0

I wrote codes to plot stacked bar chart using NVD3. Everything looks perfect untill we resize the window. URL - https://jsfiddle.net/sujit77/45zg0yoe/2/

The issue is that the x-axis label moves up and merges along with axis ticks.

nv.addGraph(function() {
    var chart = nv.models.multiBarChart()
            .margin({top: 20, right: 20, bottom: 90, left: 50})
            .stacked(true)
            .reduceXTicks(false)
            //  .staggerLabels(true)
            .color(d3.scale.category20().range())
            .x(function(d){ return d.key })
                .rotateLabels(-45)
            .y(function(d){ return d.value })

    chart.xAxis
        .axisLabel('This is X Axix')
        //.axisLabelDistance(80)

    chart.yAxis
        .axisLabel('This is Y Axix')
        .axisLabelDistance(40)
        .tickFormat(d3.format(",f"));

    d3.select('#chart').append('svg')
        .attr('width', 500)
        .attr('height', 500)
        .datum(chartData)
        .call(chart)

    d3.select(".nv-axislabel").attr("y", 76)

    console.log(d3.select(".nv-axislabel").attr("y"))

    nv.utils.windowResize(chart.update);
    return chart;
});
Sujit Kumar Singh
  • 988
  • 9
  • 24
  • I want to add more, I can't use ".axisLabelDistance(80)" for x-Axis. – Sujit Kumar Singh Jun 07 '17 at 12:40
  • Why not use a [Horizontal Multi-Bar Chart](http://nvd3.org/examples/multiBarHorizontal.html) ? – shabeer90 Jun 08 '17 at 09:10
  • @shabeer90, I can use it, but I have a requirement of using vertical multi-bar chart. – Sujit Kumar Singh Jun 08 '17 at 14:03
  • Have a look at how Mike Bostocks example of [Wrapping Long Labels](https://bl.ocks.org/mbostock/7555321) on vertical bars. Its a pure d3 example. To Wrap Horizontal Bar labels have a [look here](https://stackoverflow.com/questions/26546731/nvd3-horizontal-bar-chart-labels-too-long/44047041#44047041) – shabeer90 Jun 09 '17 at 10:42

0 Answers0