FlexChart is typically a bar chart, but can be converted into a waterfall chart to display the increases and decreases between sections of the chart.
Steps to Complete:
1. Assign a method to the itemFormatter property of FlexChart
2. Check that the chart is rendering one of the bars that displays data
3. Get the min and max values of the bar being rendered
4. If the value of the item forecastSeries is greater than 0, display a blue bar; if its less than 0, display a red bar
Assign a method to the itemFormatter property of FlexChart
The itemFormatter property will run the method that is tied to it when the control is rendering members of the control. The function will have 3 parameters; one for rendering the engine, one that describes the item being rendered, and a function that provides the default rendering format.
Check that the chart is rendering one of the bars that displays data
Next, we'll use the hitTestInfo argument to check and see if the chart is rendering one of the bars that represents a data value. We check to see if the chart element is a series symbol, and if it is, we then check to see if the name of the item is equal to the legend name. If it is, we know that we're rendering the data bars of the chart.
Get the min and max calues of the bar being rendered
In order to properly draw the bar, we'll need to know where to draw the bar being rendered in the chart. This is done by using the dataToPoint method of the chart object.
If the value of item.forecastSeries is greater than 0, display a blue bar; if its less than 0, display a red bar
Finally, we'll check if the item.forecastSeries value is greater or less than 0, and that will determine the color of the bar that the chart renders at that location.
You can find a live sample of this project at this location: http://jsfiddle.net/JParksGC/5upk2tco/