Ngx-charts: Combo-chart with multiple bargraphs

Created on 29 Aug 2017  路  10Comments  路  Source: swimlane/ngx-charts

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

Most helpful comment

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.

All 10 comments

Can you explain what you mean by multiple bargraphs please?

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?

@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

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.

@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 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

@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

@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.

@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 ?

@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?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ronybarbosa picture ronybarbosa  路  3Comments

cfremgen picture cfremgen  路  3Comments

Hypercubed picture Hypercubed  路  3Comments

stephanrauh picture stephanrauh  路  4Comments

workfel picture workfel  路  3Comments