CODEWITHSUNDEEP
angulard3.jsnvd3.jsangular-nvd3
Rahul
Rahul

Reputation: 5844

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

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.

enter image description here

  1. How do I change these circles into squares.

enter image description here

Upvotes: 2

Views: 324

Answers (2)

Sasha Klymenko
Sasha Klymenko

Reputation: 1

Try to use:

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

Upvotes: 0

shabeer90
shabeer90

Reputation: 5151

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

Upvotes: 1

Related Questions