CODEWITHSUNDEEP
javascriptd3.js
Elite user
Elite user

Reputation: 101

d3 Stacked bar chart show x values without skipping

i have created following d3 stacked bar chart

var ContainersStackedBarChart = function() {
"use strict";

var stackedBarChartData = [{
    key: 'Packed',
    'color' : COLOR_RED,
    values: [
        { x:1, y: 10}, { x:2, y: 15}, { x:3, y: 16}, { x:4, y: 20}, { x:5, y: 57}, { x:6, y: 42}, { x:7, y: 12}, { x:8, y: 65}, { x:9, y: 34}, { x:10, y: 52}
    ]
},{
    key: 'Un-Packed',
    'color' : COLOR_ORANGE,
    values: [
        { x:1, y: 10}, { x:2, y: 15}, { x:3, y: 16}, { x:4, y: 45}, { x:5, y: 67}, { x:6, y: 34}, { x:7, y: 43}, { x:8, y: 65}, { x:9, y: 32}, { x:10, y: 12}, 

    ]
}];

nv.addGraph({
    generate: function() {
        var stackedBarChart = nv.models.multiBarChart()
            .stacked(true)
            .showControls(false);

        var svg = d3.select('#containersbycarrier').append('svg').datum(stackedBarChartData);
        svg.transition().duration(0).call(stackedBarChart);
        return stackedBarChart;
    }
});
};

but the problem when data incrase it is not showing x axis values

enter image description here

i want to show full x axis labels with maybe by reducing the bar width.

i tried using this

svg.scale.ordinal().range([0, stackedBarChartData.length * 50]);

but didnt not work

Upvotes: 0

Views: 42

Answers (1)

Shivaji Mutkule
Shivaji Mutkule

Reputation: 1278

You Need to Add .reduceXTicks(false) to show all ticks.

var stackedBarChartData = [{
    key: 'Packed',
    'color' : 'red',
    values: [
        { x:1, y: 10}, { x:2, y: 15}, { x:3, y: 16}, { x:4, y: 20}, { x:5, y: 57}, { x:6, y: 42}, { x:7, y: 12}, { x:8, y: 65}, { x:9, y: 34}, { x:10, y: 52}
    ]
},{
    key: 'Un-Packed',
    'color' : 'green',
    values: [
        { x:1, y: 10}, { x:2, y: 15}, { x:3, y: 16}, { x:4, y: 45}, { x:5, y: 67}, { x:6, y: 34}, { x:7, y: 43}, { x:8, y: 65}, { x:9, y: 32}, { x:10, y: 12}, 

    ]
}];

nv.addGraph({
    generate: function() {
        var stackedBarChart = nv.models.multiBarChart()
            .stacked(true)
            .reduceXTicks(false) 
            .showControls(false);



        var svg = d3.select('#containersbycarrier').append('svg').datum(stackedBarChartData);

       svg.transition().duration(0).call(stackedBarChart);
        return stackedBarChart;
    }
});
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.min.js"></script>
<div id="containersbycarrier"></div>

Upvotes: 1

Related Questions