Search code examples
angularjsnvd3.jsangular-nvd3angular1.6ng2-nvd3

how to set color to Angular-nvd3 (1.0.7)

I'm working on an AngularJS 1.5.3 project , and I use Angular-nvd3(1.0.7). I have met 2 problems:

1,When I'm using a discreteBarChart , I need to assign different color to every column,like this:(seems the picture can't display , you can imaging it , it's a simple chart like http://krispo.github.io/angular-nvd3/#/discreteBarChart)

here is the picturl and I didn't find any place, to let me add a group of color .so I want to know how to add different colors to each column.

and the second question is , I need to use a multi Chart , like this:http://krispo.github.io/angular-nvd3/#/multiChart . don't need so complex like the link. just need a pair of histogram . but I don't know the data's right structure.and it's not in the documentation. so I hope someone can help me with those 2 promblems.

Solution

  • Answer to your First Query : You can set a different color for each bar in your discrete Bar Graph Chart in Multiple ways:

    1. First Approach:

    Configure your $scope.options object which you provide to nvd3 directive and provide a list of color code you want for your bars. You can provide a color name, Hex Code of Color or RGB Code of Color.

    View This Plunkr for a working demo of the first approach. Please see plunkr before reading the explanation.

    You can see in this demo that colors are provided as a list in $scope.options object. The first color is provided as the color name i.e red, the second color is provided as RGB Code and rest all colors are provided as Hex Code. You can provide any number of colors in the list.

    Here, you should note: If there are more number of bars in your graph then the number of colors then colors for bar will start repeating in the same order in which you provided in list.

    2. Second Approach:

    View This Plunkr for working demo of the second approach. Please see plunkr before reading the explanation.

    In the second approach, the color is provided with $scope.data object which you provide to nvd3 directive and we made necessary changes to the $scope.options configuration object. Here in the $scope.options object the color field is set to a function which returns color field of individual objects of $scope.data array i.e 'purple' for first, rgb(10,20,30) for second, etc..

    Hope this helps!!
    Will back get soon with the solution for your second problem.