ngx-charts icon indicating copy to clipboard operation
ngx-charts copied to clipboard

Combo-chart with multiple bargraphs

Open harald opened this issue 6 years ago • 12 comments

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

I have found the combo-chart in your demo section helpful in understanding your concepts. However, I have not been able to figure out yet how to extend the sample combo-chart such that it supports multiple bargraphs.

I assume it's a fairly simple change. I'd be very grateful if somebody could help me with this. Thanks.

  • Angular version: 4.x

  • Browser: all

  • Language: TypeScript 2.x

harald avatar Aug 29 '17 03:08 harald

Can you explain what you mean by multiple bargraphs please?

marjan-georgiev avatar Sep 15 '17 12:09 marjan-georgiev

I think @harald means he would like to have multiple bar charts on the same page? something like (dummy code here)

<ngx-charts-bar-vertical></ngx-charts-bar-vertical>
<ngx-charts-bar-vertical></ngx-charts-bar-vertical>

where each ngx-charts-bar-vertical has different data?

seekheart avatar Sep 20 '17 02:09 seekheart

@harald I'm guessing you are looking for something like the below image? If so I am finalizing one that I need for a project and I can create a PR to place it in the demo section "soonish". Need to work out a few more issues with the line position relative to the bars. That said, it's actually pretty straight forward if you use the combo chart example https://swimlane.github.io/ngx-charts/#/ngx-charts/combo-chart and replace the bar chart code with the grouped vertical bar chart. Of course there's a little more to it but it's all there to be had. It's really great they expose all of the components needed to create complex charts such as this.

I will try and create a PR for this in the next week for so when I can get to it.

screen shot 2017-09-19 at 10 24 59 pm

JoshSchoen avatar Sep 20 '17 03:09 JoshSchoen

Please provide an example for implementing Combo Charts. You have a demo for this. But how to implement this is no where provided in any documentation. Please dont mislead the developers. If you cant provide any doc remove it from your demo.

anishgomez avatar Oct 13 '17 13:10 anishgomez

@JoshSchoen Did you ever create a PR or do you happen to have an example of how you made the grouped bar chart work with a line graph combined?

I've had a ton of trouble getting this to work. I even created an issue for it a few months ago for which I still have not received any response for: https://github.com/swimlane/ngx-charts/issues/694

Specifically, none of the HTML that's inside of my element is being rendered (specifically, the line chart). I do see my bar charts appear, but no line-chart series. If you can provide an example of how you got it to work, that would be immensely helpful!

burzum619 avatar May 27 '18 19:05 burzum619

@burzum619 did you get this to work? Im trying to create a stacked bar chart with line chart.. but not sure how I switch out the bar chart provided in the demo with the stacked bar

jeniferseb avatar Jun 28 '18 15:06 jeniferseb

@JoshSchoen @marjan-georgiev @Hypercubed any update on this? I'm also looking for a way to create multiple bar charts with two y-axes like the image below: image

amejiarosario avatar Jan 27 '20 18:01 amejiarosario

@harald I'm guessing you are looking for something like the below image? If so I am finalizing one that I need for a project and I can create a PR to place it in the demo section "soonish". Need to work out a few more issues with the line position relative to the bars. That said, it's actually pretty straight forward if you use the combo chart example https://swimlane.github.io/ngx-charts/#/ngx-charts/combo-chart and replace the bar chart code with the grouped vertical bar chart. Of course there's a little more to it but it's all there to be had. It's really great they expose all of the components needed to create complex charts such as this.

I will try and create a PR for this in the next week for so when I can get to it.

screen shot 2017-09-19 at 10 24 59 pm

have you had any luck with resolving your issue? I'm having a similar problem with creating a grouped vertical bar/line combo chart.

kinjalpgor avatar Apr 30 '20 04:04 kinjalpgor

@harald I'm guessing you are looking for something like the below image? If so I am finalizing one that I need for a project and I can create a PR to place it in the demo section "soonish". Need to work out a few more issues with the line position relative to the bars. That said, it's actually pretty straight forward if you use the combo chart example https://swimlane.github.io/ngx-charts/#/ngx-charts/combo-chart and replace the bar chart code with the grouped vertical bar chart. Of course there's a little more to it but it's all there to be had. It's really great they expose all of the components needed to create complex charts such as this.

I will try and create a PR for this in the next week for so when I can get to it.

screen shot 2017-09-19 at 10 24 59 pm

Hi @JoshSchoen , I need to implement the combo with group bar vertical + line. Do you have any repo / sample please ?

davidenriquez avatar May 27 '20 09:05 davidenriquez

@harald I'm guessing you are looking for something like the below image? If so I am finalizing one that I need for a project and I can create a PR to place it in the demo section "soonish". Need to work out a few more issues with the line position relative to the bars. That said, it's actually pretty straight forward if you use the combo chart example https://swimlane.github.io/ngx-charts/#/ngx-charts/combo-chart and replace the bar chart code with the grouped vertical bar chart. Of course there's a little more to it but it's all there to be had. It's really great they expose all of the components needed to create complex charts such as this. I will try and create a PR for this in the next week for so when I can get to it. screen shot 2017-09-19 at 10 24 59 pm

Hi @JoshSchoen , I need to implement the combo with group bar vertical + line. Do you have any repo / sample please ?

Hello @davidenriquez , Have you create the Stacked Bar+Line combo chart?

atj393 avatar Jul 31 '20 14:07 atj393

@harald I'm guessing you are looking for something like the below image? If so I am finalizing one that I need for a project and I can create a PR to place it in the demo section "soonish". Need to work out a few more issues with the line position relative to the bars. That said, it's actually pretty straight forward if you use the combo chart example https://swimlane.github.io/ngx-charts/#/ngx-charts/combo-chart and replace the bar chart code with the grouped vertical bar chart. Of course there's a little more to it but it's all there to be had. It's really great they expose all of the components needed to create complex charts such as this.

I will try and create a PR for this in the next week for so when I can get to it.

screen shot 2017-09-19 at 10 24 59 pm

Hello! Did you ever get making the combo grouped bar chart with lines?

Nurech avatar Oct 30 '21 16:10 Nurech

Any updates on this? @JoshSchoen I'm also trying to achieve something similar to what @harald is describing. A stacked vertical chart with a line chart on top sadly with no luck. I've looked at the combo chart example but seeing as it's a one off example it doesn't give a good indication of what needs to be changed if we want to swap the conventional bar chart into a different one and vice versa.

RicardoVaranda avatar Jan 20 '22 12:01 RicardoVaranda