This post shows howto use the ngx-simple-charts library with the examples in the projects AngularAndSpring and AngularPortfolioMgr.

AngularAndSpring example

In the AngularAndSpring project the single line chart and the module is added in the detail.module.ts and is used in the bfdetail.component.html and uses the minimum of parameters: 

<sc-line-chart [chartPoints]="chartPoints"></sc-line-chart>

The bfdetail.component.ts extends the detail-base.ts class that is used for most detail components. In the ‘DetailBase.updateChartData(…)’ method the chart values are mapped in the ChartPoints and ChartPoint interfaces and then provided as chartPoints property to the library.

There are no style classes overwritten in bfdetail.component.scss so the default styling of the library is used for the chart and the legend.

AngularPortfolioMgr example

In the AngularPortfolioMgr project the multi line chart is used and the Module is added in the portfolios.module.ts and is used the in the symbol.component.html with these parameters:

‘<sc-line-chart [chartPoints]=”chartPoints” [replaceName]=”portfolioName” [replaceSymbol]=”portfolioSymbol”></sc-line-chart>’

The symbol.component.ts provides the ‘chartPoints’ property, the ‘portfolioSymbol’ property and the ‘portfolioName’ property to the library. The symbol of the portfolio is generated and is supplied in the ‘portfolioSymbol’ property and gets replaced with the string in the ‘portfolioName’ property. For each line in the chart an implementation of the ChartPoints and ChartPoint interfaces is added to the ‘chartPoints’ property of the symbol.component.ts.

The symbol.component.scss provides the style classes for the additional lines in the chart. For example:

::ng-deep .line-ivv {
    fill: none !important;
    stroke: #ff0000 !important;
    stroke-width: 2 !important;
}

The ‘::ng-deep’ is needed to style a component used inside the host component and needs ViewEncapsulation.Emulated(default) or ViewEncapsulation.None. The class name ‘line-ivv’ uses the naming convention line-‘ChartPoints.name'(for example: ‘line-abc’) with the name in lower case. The ChartPoints.name is filtered with this Regex: ‘[^a-zA-Z0-9-]’ that cuts off the name if a character is found that is not a letter, number or ‘-‘(for example ‘line-Abc1.d’ -> ‘line-abc1’) and changes it to lower case. The properties in the style class need to have ‘!important’ to have priority.

  • The ‘fill’ property needs to be set to none for the D3js library.
  • The ‘stroke’ property sets the color of the line.
  • The ‘stroke-width’ property sets the line width of the line

The ‘stroke’ colors are also used to display the ChartPoints.name property in the legend.