search

GraFiddle / angular-chart

AngularJS directive for adjustable dynamically updating c3 charts
http://grafiddle.github.io/angular-chart/
MIT License
127 stars 40 forks source link

How do I use grouping to do a stacked bar? #51

Closed dilignt closed 9 years ago

dilignt commented 9 years ago

It's not clear to me how to use the grouping feature of the API. The documentation points towards the C3 example, but that uses the columns field as the data orientation, whereas angular-chart doesn't seem to support the columns field, but it is still possible to specify orientation. The two APIs seem to be slightly different in this case, and I've not been able to get grouping working in angular-chart.

It would be really helpful to see a grouping, stacked-bar example of the angular-chart API, and how the orientation property works. Aside from this, I've been impressed with angular-chart and found it useful and easy use and integrate.

many thanks in advance

maxklenk commented 9 years ago

Hey @dilignt, yes the APIs are slightly different, to clarify how to use the grouping feature I create a sample: http://plnkr.co/edit/EWC4Hr?p=preview

Note that groups is an Array of Arrays:

groups: [
  ['data1', 'data2']
]

Please close the issue, if your question is resolved.

dilignt commented 9 years ago

Perfect - thanks @maxklenk :)

dilignt commented 9 years ago

Hi again @maxklenk

I've noticed in your example and in my implementation that the tooltip jumps about when moving the mouse between groups on the chart. I've got lots of rows in my group and this causes the tooltip to jump half off the top of the div where the chart is rendered, a long way from the mouse pointer. Is there anyway to stop this happening?

On 21 January 2015 at 21:10, Max Klenk notifications@github.com wrote:

Hey @dilignt https://github.com/dilignt, yes the APIs are slightly different, to clarify how to use the grouping feature I create a sample: http://plnkr.co/edit/EWC4Hr?p=preview

Note that groups is an Array of Arrays:

groups: [ ['data1', 'data2'] ]

Please close the issue, if your question is resolved.

— Reply to this email directly or view it on GitHub https://github.com/maxklenk/angular-chart/issues/51#issuecomment-70922256 .

maxklenk commented 9 years ago

You can solve this issue by applying the css attribute position: relative; to the angular-chart directive. I am currently not sure why it isn't added by default.

dilignt commented 9 years ago

That works - thanks.

On 22 January 2015 at 14:38, Max Klenk notifications@github.com wrote:

You can solve this issue by applying the css attribute position: relative; to the angular-chart directive. I am currently not sure why it isn't added by default.

— Reply to this email directly or view it on GitHub https://github.com/maxklenk/angular-chart/issues/51#issuecomment-71029227 .