Dynamically Set the Axis Titles in Vue

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. Tie an event to the chart’s initialized event

2. Assign the chart’s axis titles inside of the initialized event

Getting Started

Tie an event to the chart’s 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>

Assign the chart’s axis titles inside of the initialized event

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.