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!
Hi @gabrielloye , I'm in the process of trying to create a custom chart. in the default set up of combo-chart-component, the template is used from 'ngx-charts-chart'. I am trying to add some customization to the bar chart being used, and would like to replace this with < ngx-charts-vertical-bar> so i can leverage properties like [showDataLabel]. This however prevents my chart from being displayed entirely. Do you have any insight as to what can be done to leverage other bar charts ngx offers? or if theres any known way of adding datalabels to the bar charts used already?