Dynamically Set the Axis Titles in React

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:

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

Getting Started

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.

<wjcChart.FlexChart itemsSource={this.state.data} initialized={this.initChart.bind(this)} bindingX="country">

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.

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

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