Dynamically Set the Axis Titles in Angular

Background:

The titles of FlexChart are typically defined in the markup for the chart control. We can use some Angular hooks to set these titles dynamically instead of having to hard-code the titles in.

Steps to Complete:

1. Use ViewChild to get the WjFlexChartAxis elements

2. Call on ngOnInit() and enter the values for the titles

Getting Started

Use ViewChild to get the WjFlexChartAxis elements

First, we must include the ViewChild package to get the x and y axis elements when they're rendered, and tie them to variables.

@ViewChild('axisY') axisY: wjcChart.WjFlexChartAxis;
@ViewChild('axisX') axisX: wjcChart.WjFlexChartAxis;

Call ngOnInit() and enter the values for the titles

Next, in the ngOnInit method that gets included when using the OnInit interface, we use axisX and axisY variables from the previous step to set the titles for each axis.

ngOnInit() {    
  this.axisX.title = 'Countries with Branches';    
  this.axisY.title = 'Regional Percentages';
}

You can find a live sample of this project at this location: https://stackblitz.com/edit/wijmo-knowledgebase-angular-flexchart-dynamically-set-titles