nvD3 - multiBarChart - How to start from 0 and how to change the shape of controls

Question

I have added a multiBarChart in my app using nvD3.

I am stuck in doing two things:

1. How to start it from 0. My first bar is starting after leaving some space. I played with group spacing but it didn't work.

2. How do I change these circles into squares.

Answer 1

1) NVD3 allows you to reduce the spacing between bars using the groupSpacing function. You can try the following :

var chart = nv.models.multiBarChart()
        .groupSpacing(0)

2) Changing the shapes of the legend is not very straight forward. However, you can alter it fairly easily using d3 selections to manipulate its various parts.

The answer here will help you with changing the shapes of the legend.

#UPDATE

Regarding your specific requirement for your first question,

I just want them to start from 0 without leaving space

You can try the following code to manually select the element and move its position.

// TODO : Find a dynamic way to find translate(X,Y)
d3.select(".nv-barsWrap").attr('transform', 'translate(-10,0)');

Here is a working version of the code.

Hope it helps

Answer 2

Try to use:

        chart: {
            lines: {
                forceY: ([0])
            }
        }