2

I need to implement a chart with ngx-charts (see: https://github.com/swimlane/ngx-charts) that combines multiple chart types into one. I already found the combo-chart-component example here that combines a line chart and a vertical bar chart but what I need is a line chart and a scatter plot (bubble chart). I would like to understand the code behind the combo chart example to be able to combine any 2 (or more) chart types into one but as there is no documentation for it, I could not figure out which parts of the source code belong to the line chart und which to the bar chart.

There is no other example in the whole world wide web than the one above that combines 2 (or more) different chart types into one, using ngx-charts.

Can anyone explain what I need to change from the above example to have a bubble chart instead of a bar chart?

... or maybe even provide a finished example that I just need to copy and paste into my project? :)

(I am using angular 6 with ngx-charts 9 but I could upgrade if I need to)

cbicer
  • 21
  • 1
  • 4
  • I'm going through the same thing. Can you share which all steps you followed to create the custom chart? I need to implement a **Grouped Vertical bar chart** with **line chart** – saintlyzero Nov 07 '19 at 10:11
  • 1
    basically, what I did was literally copying the combo chart components into my own project and adjust them. then, instead of using the ngx-charts components in the template, I used my own custom components. It took me a long time (and a lot of concentration) to make it work, because I first needed to figure out, what each variable and function is used for. I would suggest starting with copying the combo chart example and making it work. after that, you can change some values and see, what impact they have. And then you can change a whole chart type with your own chart.. and so on – cbicer Nov 08 '19 at 11:19
  • 1
    I made the combo-chart example work. Now I need to customize it to include grouped-bar-chart with line-chart. Understanding the code of that component will definitely take a huge amount of time. Also, there will be a lot of rework to do. Is it worth the effort or should I switch to D3JS and make a fully customized component from scratch? – saintlyzero Nov 08 '19 at 13:03
  • Can you share the finished code for "Grouped Vertical bar chart with line chart"? Were you able to accomplish it with ngx-charts? – Ron Feb 09 '22 at 18:48

1 Answers1

2

I've been working on something for a couple weeks that allows you to build custom charts a lot easier than the ngx-charts documentation.
Here's the references:

Hopefully this will work for you.

EDIT: After a lot of work, I decided that ngx-charts didn't have everything I needed for my charts. So I decided to make my own. GitHub. Demo

yarz-tech
  • 284
  • 2
  • 6
  • 18
  • nice work! Actually, I sat down and implemented my own component to fit the requirements. But thank you for your work! Maybe one day I will need it. – cbicer Jan 16 '19 at 13:04