Generate a combo chart using ngx-charts

Question

I need a combo chart between Stacked Bar Char and Line Bar Chart could you help me with some example. I was reading this doc: Demo for combo charts

But I can't understand the example.

Answer 1

For anyone that chances upon this post when searching for a way to include the combo-chart, these are the main steps to use the demos from the ngx-charts GitHub.

1. Copy the all the 4 components from the combo-chart component under the demo folder in the ngx-charts repository

   • Your folder structure will look like this:

   combo-chart
    └─ combo-chart.component.scss
    └─ combo-chart.component.ts
    └─ combo-series-vertical.component.ts
    └─ index.ts
   

2. Change the imports in the 2 component.ts files from relative links to '@swimlane/ngx-charts'

   • From '../../src' to '@swimlane/ngx-charts'

   • From '../../src/common/label.helper' to '@swimlane/ngx-charts'

3. Import the components and declare them in your module.ts file

   .
   import { ComboChartComponent, ComboSeriesVerticalComponent } from './combo-chart';
   .
   .
   declarations: [
   .
   .
   ComboChartComponent, ComboSeriesVerticalComponent],
   .
   

4. You can now use the custom combo-chart component in your template with the selector <combo-chart-component>

I've created a simple gist walking through the process in greater detail, do check it out - https://gist.github.com/gabrielloye/67921cda6139ba1806920da2a7e2fcb2

The StackBlitz link to the working example: https://stackblitz.com/edit/ngx-charts-combo-chart