Better documentation regarding combo charts

[ChristofferArnlund]

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

Limited to None documentation for combined chart creation. The demo provided is not clear and limits the usability of this package. Also update to angular 5 demos would be nice.

Expected behavior

Easy to use "follow these steps" tutorial/doc.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Easier to use the package leads to more user and accessibility.

Please tell us about your environment:

Win 10, Sublime, npm, Chrome latest

• ngx-charts version: x.x.x

7.01

• Angular version: 2.x.x

Angular 5

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5] all

[brezimenko]

Ditto that. If you're a rookie, all those svg's can be quite hard to comprehend. Would be nice to have a bit of a background story with simple examples. :)

[chrisaige]

I would love that too. Have a hard time wrapping my head around all this

[julianpoemp]

I'm trying to develop a grouped stacked vertical bar chart, but I have problems to understand how it works. I'm new to d3.js and ngx-charts and can't follow how to implement a costum chart step by step. The combo chart demo project is not very helpful. The whole code is uncommented...

[RicardoVaranda]

Any updates on this? I'm also trying to achieve something similar to what @julianpoemp 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.

[Zoraiyo]

Hi @RicardoVaranda, I have implemented a custom line chart with two different Y axis with different scaling, which I needed for a project. I have created a PR (#1625) for this custom chart.

It's been about a year, but I'll try to briefly summarize how I did it.

1. First I looked at the normal line chart because that was my "base" for my custom chart
2. I analyzed the used components in the HTML (and the HTML structure) of the line chart. Which data is passed to those components and where does that data come from.
3. Looked into detail what the TS code does (tried to add a comment to every used/interesting variable)
4. Added to every variable/component that interacts with the data or the Y axis a sibling variable/component for my secondary Y axis.
5. Made some base configuration (eg. default Y axis position left - secondary Y axis position right)
6. Took the ngx-charts example app as test field
7. Added some additional inputs for the secondary Y axis so I can change the settings fast
8. Testing if all features from normal line chart still works and are working for my secondary Y axis - like scaling, timeline, hover, etc. - and fixing the errors
9. Some code cleanup & finishing the demo for the pull request

Conclusion I think all of that took around a week of work but I was pretty new to Angular, TS and ngx-charts. The beginning was difficult because ngx-charts has so many options, but after looking at what each variable does, I got a very good idea of how the base structure works.

Demo Combo-Chart I had looked into the combo-chart for some ideas but that example is really a bit complicated because the data for the line chart is mapped with the bar chart data -> mixing line and bar charts is difficult because bar chart uses categorial data for the X axis and line charts linear/time data.

[strbrgr]

@Zoraiyo I am trying to build a Combo Chart that combines a Line Chart with a bubble chart and the additional functionality of adding vertical lines. For your Double Line Chart, I don't see the line-series.component.ts and the line.component.ts in your Double Line Chart folder. Is this because you are working with a forked repo? So if I am not working off the forked repo I would need those two files in my project to make the Line Graph happen?

[Zoraiyo]

Hello @heyjochen, I haven't worked with this package and the double-line-chart for a long time, as I have moved on to other things, but I'll try to answer your question. Both files are not part of the double-line-chart folder because I use the LineSeriesComponent and the LineComponent as they come from the package. The double-line-chart is not an extension of the package itself but a component that I developed for my own project and wanted to share via the custom-chart demo (as suggested in the docs). As long as you have the ngx-charts package installed as a dependency in your project you can use all their base component (i.e. all components which are used to create a chart component, like axis, timeline, series, etc.) to create your own BubbleLineChartComponent. There should be no need to work on my fork, which only exists so that I can create a PR.

[strbrgr]

@Zoraiyo Thank you so much for getting back to me.

So let's say I want to create my custom chart that combines several different charts into one. Would I import the components which are used to create a chart, like axis, timeline, series, etc. into my component, or would I copy and paste the code from the ngxcharts repo into my codebase?

I tried to copy and paste the necessary code for a line chart into my codebase but it throws errors on everything. I'm on strict typechecking and nothing works.

[Zoraiyo]

@heyjochen no problem. Sometimes I have fun looking at my old code and wondering what I was doing ;-)

The project I worked on (Angular 11 and ngx-charts 18) had a chart module which imports the NgxChartModule. If I remember it correctly, this gave me access to all the components of ngx-charts within this chart module. Then I could use all the base components in my own component (as example the ngx-charts-x-axis in double-line-chart.component.html). I should add that I copied the normal LineChartComponent as base and then added a second of everything (y-axis, line series, tooltip), i.e. I did't start the chart from scratch. This was also an easier task than combining two different types of chart, like the the combo-chart does, because charts consist of different base components and their data handling is slightly different.

In theory it must be possible to copy the whole code from the LineChartComponent in your own codebase, rename the selector and export it as new component and use it like every other component in your project. Then you could try to add the components from the bubble chart and combine the data handling in the component class.

It's hard for me to help more as I haven't worked with Angular for more than two years.