CODEWITHSUNDEEP
javascripthtmld3.jsbar-chartc3.js
MTT
MTT

Reputation: 379

Overlapping bars in c3 (v4) bar chart

I would like to make a reference to this previous question:

stacked bar chart with overlapping bars C3js

However, my only problem is that I want to overlap columns to show (as an example) that from 4 students, 3 have passed the subject. Right now I have a bar with height 3 and on top a bar with height 4, which makes it 7 and I want a bar of 4 with a bar of 3 overlapping. How can I change my code? Thanks:

        <div id="chart3"></div>
        <script>
            var chart = c3.generate({
                bindto: '#chart3',
                data: {
                    url: '../static/CSV/Chart_data/number_students.csv,
                    x:'AC_YEAR',
                    type: 'bar',
                    groups: [
                        ['Total women', 'Passed women'],
                        ['Total men', 'Passed men']
                    ],
                },
                axis: {
                    y: {
                        label: {
                            text:"Number of students",
                            position: "outer-middle"
                        },
                    },
                    x: {
                        label: {
                            text:"Year",
                            position: "outer-center"
                        },
                    }
                },
                size: {
                    height: 400,
                    width: 800
                },
                bar:{
                    width:{ratio:0.7}
                },
                legend: {
                        show: true,
                        position: 'inset',
                        inset: {
                            anchor: 'top-right',
                            x: 10,
                            y: 5,
                            step: 2
                        }
                    }        
            }); 
        </script>

The csv file number_students is:

AC_YEAR,Passed women,Passed men,Total women,Total men
2010,72,239,98,315
2011,77,227,83,276
2012,65,226,93,298
2013,54,215,77,283
2014,63,233,88,294
2015,49,205,64,267

The current one looks like this:

Without overlapping bars

And the one I want should overlap so that, in 2010 for example, we would see only a little of green (the 7 female students that did not passed) because the blue in the front is only 7 units less than the green. And in the right 29 units of red color (the male students that did not passed).

Upvotes: 1

Views: 1123

Answers (1)

Aditya
Aditya

Reputation: 1377

I have never worked with c3 before so I have no idea if there is any chart in c3 that can particularly do this. I was able to solve this by using d3.

Firstly c3 uses path for bars instead of rects for some reason otherwise changing the width of the bars could have been easier.

What I did was first store all the dimensions of the bars for all four categories into four different arrays using d3.select(**bars**).node().getBBox() and then adjust the y and width for Total women and Total men bars according to y attributes of Passed women and Passed men because we want to overlap them.

Then hide all the path elements created by c3 and then wrap all this in a function to be called when the user resizes the browser window.

Here'a the complete fiddle or a plunkr

Upvotes: 2

Related Questions