I've been using ngx-charts when building my Angular apps and its definitely one of the best free charting frameworks available for Angular (that I've tried at least). However, one thing I noticed is the lack of documentation or guides when it comes to creating or even using custom charts. Therefore I decided to create a simple walkthrough on how to use the bar/line combo-chart avaiable as one of their demos.
StackBlitz Link: You can refer to this link to see the final product/overview of how to use the custom chart in your project.
Ensure that you have swimlane/ngx-charts installed as a dependency
npm i @swimlane/ngx-charts --save
- Create a folder named combo-charts that will store the components of the custom chart (which we will create next)
- This folder can be created in a shared folder for your project or within other folders that you are going to use the component in
- In the example, I just created it in the main app folder
- From https://github.com/swimlane/ngx-charts/tree/master/demo/combo-chart, create and copy the exact components into the combo-charts folder which we have just created above. Your folder directory will look like this:\
combo-chart\
└─ combo-chart.component.scss
└─ combo-chart.component.ts
└─ combo-series-vertical.component.ts
└─ index.ts
- Copy all the code in the individual files from https://github.com/swimlane/ngx-charts/tree/master/demo/combo-chart into the respective files
You'll notice that some of the imports in the code you've just copied are relative and do not exist. Its time to fix that
- In combo-chart.component.ts you'll see the following import:
import {
NgxChartsModule, BaseChartComponent, LineComponent, LineSeriesComponent,
calculateViewDimensions, ViewDimensions, ColorHelper
} from '../../src';
- Change the
'../../src'to'@swimlane/ngx-charts'
- In combo-series-vertical.component.ts you'll see the following import:
import { formatLabel } from '../../src/common/label.helper';
- Similarly, change the
'../../src/common/label.helper'to'@swimlane/ngx-charts'
These are the only changes we'll make to the custom components. You can leave the index.ts and combo-chart.component.scss as it is
Next, We'll update our app.module.ts or feature modules and declare the components we have just created
- First, ensure that you imported the NgxChartsModule and BrowserAnimationsModule
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxChartsModule } from '@swimlane/ngx-charts';
.
.
imports: [
.
BrowserAnimationsModule
NgxChartsModule
.
- Import the custom components using the relative file path to the combo-charts folder that we have just created in the earlier step and add the components to your declarations
.
import { ComboChartComponent, ComboSeriesVerticalComponent } from './combo-chart';
.
.
declarations: [
.
.
ComboChartComponent, ComboSeriesVerticalComponent],
.
- In the component that you intend to add the combo chart to, add the following code to the template or .html file
<combo-chart-component
[view]="view"
[scheme]="comboBarScheme"
[colorSchemeLine]="lineChartScheme"
[results]="barChart"
[animations]="animations"
[lineChart]="lineChartSeries"
[yAxisTickFormatting]="yLeftTickFormat"
[yLeftAxisScaleFactor]="yLeftAxisScale"
[yRightAxisScaleFactor]="yRightAxisScale"
[yRightAxisTickFormatting]="yRightTickFormat"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[legendTitle]="legendTitle"
[legendPosition]="legendPosition"
[showGridLines]="showGridLines"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[showRightYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[yAxisLabelRight]="yAxisLabelRight">
</combo-chart-component>
- In the .ts file of the component, you can define the variables for the properties and data, for example:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
legendTitle = 'Legend';
legendPosition = 'right';
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'GDP Per Capita';
showGridLines = true;
innerPadding = '10%';
animations: boolean = true;
barChart: any[] = barChart;
lineChartSeries: any[] = lineChartSeries;
lineChartScheme = {
name: 'coolthree',
selectable: true,
group: 'Ordinal',
domain: ['#01579b', '#7aa3e5', '#a8385d', '#00bfa5']
};
comboBarScheme = {
name: 'singleLightBlue',
selectable: true,
group: 'Ordinal',
domain: ['#01579b']
};
showRightYAxisLabel: boolean = true;
yAxisLabelRight: string = 'Utilization';
}
export let lineChartSeries = [
{
name: 'Tablets',
series: [
{
name: 'USA',
value: 50
},
.
.
.]
export let barChart: any = [
{
name: 'USA',
value: 50000
},
.
.
.]
- Note: Not all the directives used in the example above have to be used in your code. You can refer to combo-chart.component.ts for the available inputs
After following the above steps, you should be able to see the combo-chart appear in the view. You can further customise the chart by adding to combo-chart.component.ts or combo-series-vertical.component.ts, which I will not cover here. I hope that this short and simple guide was helpful and clear in explaining how to start using custom charts from ngx-charts!
Oh, sorry, also, do you remember what you changed? The official ngxcharts bar chart stackblitz is also broken with same problem - https://stackblitz.com/edit/vertical-bar-chart?embed=1&file=app/app.component.ts