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:
This section should display a list of tasks that will need to be complete to implement the feature outlined in the article (if applicable).
1. Tie a method to FlexChart’s ‘initialized’ event
2. Inside of that event, set the titles for the chart’s X and Y axis
Tie a method to FlexChart’s ‘initialized’ event
Since we want to set the axis titles dynamically, the control will need to be initialized first, prior to sending the titles to be used. To do this, we’ll tie a method to FlexChart’s initialized event.
This ties the method to the event, as well as passes the component to the method as an argument, which we’ll need to do to set the titles.
Inside of that event, set the titles for the chart’s X and Y axis
Next, inside of the method that we’ve created, we’ll simply set the values for the axis in the axisX and axisY properties of the chart.
You can find a live sample of this project at this location: https://stackblitz.com/edit/wijmo-knowledgebase-react-flexchart-dynamically-set-titles