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.
1. Tie an event to the chart’s initialized event
2. Assign the chart’s axis titles inside of the initialized event
First, we must tie an event to FlexChart’s initialized event. The event gets fired after the chart has been initialized, meaning that we can then assign values to properties of the chart.
<wj-flex-chart header="Country GDP" bindingX="country" selectionMode="Point" :itemsSource="data" :initialized="initChart">. . .</wj-flex-chart>
Next, in the initialized method, we use axisX and axisY variables from the previous step to set the titles for each axis.
initChart(chart) {
chart.axisX.title = 'Countries with Branches';
chart.axisY.title = 'Yearly Sales';
}
The chart will then auto-refresh and display the new titles that were set for the axis.
Joel Parks