[Feature] Compound Charts

[Kumfert]

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

Current behavior Line charts, area charts, and bar charts are all mutually exclusive plots.

Desired behavior I'd like to do compound charts which stack two (or more) charts in the same/similar index space. This could be both X and Y axes... or just the X axis, resulting in double Y axes on left and right. Also, the subsequent charts would need a predictable z-ordering, and independent color schemes. This would enable trend lines on bar charts, rolling averages, etc.

What is the motivation / use case for changing the behavior? This is a fairly common feature. There are many examples of this to be found on the web. I list a few here for your convenience.

1. Sliding average as a line above an area plot http://www.ta-guru.com/Images/TechnicalAnalysis/TechnicalIndicators/Moving%20Average.jpg
2. Linear fit over scatterplot data http://www.ta-guru.com/Images/TechnicalAnalysis/TechnicalIndicators/Moving%20Average.jpg
3. Plotting strongly correlated data: (# of sales & revenue) in bars and lines on a chart with independent Y axes. http://www.datapine.com/blog/wp-content/uploads/2015/05/combined-line-chart-and-column-chart.png
4. Here's an example of a vertical line atop a horizontal bar chart so everyone can see who's above or below average in sales http://www.exceltactics.com/wp-content/uploads/2014/03/VerticalLineHorizontalBarChartLead.png
5. Here's an example where averages are applied to groups within a bar chart (note the lines are disjoint) . https://i.stack.imgur.com/pAh1k.png
6. Sometimes the overlaid lines are essential for understanding deviance from ideal, such as this burn-rate chart. https://www.visualstudio.com/en-us/docs/report/sql-reports/_img/procguid_healthyburndown.png

References I realize this is a big ask, but its also a very useful and widespread feature. The way most technologies accomplish this is to separate the axes as a distinct component that can hold multiple plots. Examples from open source and industry include TeX/LaTeX, Python's Matplotlib, Matlab, and Microsoft Excel.

Please tell us about your environment: Not entirely relevant, since it's a feature request, not a bug, but FWIW...

• ngx-charts version: 5.3.1

• Angular version: 4.2.5

• Browser: all

• Language: all

[Kumfert]

P.S. I just found a combo chart in the demos: https://swimlane.github.io/ngx-charts/#/ngx-charts/combo-chart. But I can't find any example of how to code it up in documentation. Perhaps this feature request is a documentation bug? (Or I'm blind and missing something)

[marjan-georgiev]

This has been discussed before: #193, #367, #243, #404

As stated in those discussions, there are many possible combinations of these charts, so creating a separate chart (or a configurable chart that supports all of them) for every combination is a very complex task and something that would be incredibly hard to maintain. This is also evident from your examples above.

However, we expose all components that are used as building blocks in the framework, so building a custom chart that fits your needs is a much simpler task.

The combo chart in the demo is an example of how you can combine these components to build your own custom chart (in this case combining bar + line). The code for our whole demo application is in the demo folder of this repository, and you can find the code for the combo chart inside it: https://github.com/swimlane/ngx-charts/tree/master/demo/combo-chart

[anishgomez]

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.

[trumbitta]

Yep, a tutorial on how to recreate the demo combo chart step by step would be much appreciated.

[Buggyy]

@marjan-georgiev copy pasta isn't the issue. It is within the wiring of certain dependencies that come from within the library when trying to reproduce these chart cases. We would appreciate the effort as I am too, trying to figure this out, when completed I will submit a PR. Thanks in advance.

[ronyf]

Any luck with the demo?

[wahabshah21]

Is there any update on this in 2022?

[Zoraiyo]

Hi @wahabshah21 I created last year a line chart with two different y axis last year. I added my code and the demo chart in the PR #1625. Unfortunately, the PR has not yet been merged. The "double-line-chart" should have all features of the normal line-chart. Maybe my code can help you to better understand how to create a custom chart. Check out my comment on another issue, where I roughly described my workflow.