1

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.

Neko
  • 581
  • 1
  • 9
  • 24

1 Answers1

0

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.

Tejas Rathi
  • 68
  • 6
  • thanks for your answer, I have tried it , copied all the options and data . the graph shows .. but I can only see the data there , but the bar is not displayed. but when I mouse hover by it , it gave me a tooltips , so the bar is exist , but I can't see it . – Neko Apr 17 '19 at 02:52
  • Can you create a plunkr for what you did. May be you have missed including some dependency. A working plunkr will help in understanding what is happening. – Tejas Rathi Apr 17 '19 at 15:45