How do I use grouping to do a stacked bar?

[dilignt]

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]

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]

Perfect - thanks @maxklenk :)

[dilignt]

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
#51 (comment)
.

[maxklenk]

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]

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
#51 (comment)
.