# Render Cycle in FlexChart

Learn about the rendering lifecycle in Wijmo's chart in this documentation topic

## Content

The FlexChart is data-driven. When there are changes to the data it is bound to, or to any of its properties, the chart goes through a render cycle, which consists of these steps:
1. __Get the data__:
The chart has an __itemsSource__ property that represents the overall data source, and each series may override this using its own local __itemsSource__ property. Similarly, the chart has __bindingX__ and __binding__ properties that determine the values to be charted for each series.
In most cases, you will set the __itemsSource__ and __bindingX__ properties on the chart object, and the __binding__ property on each series.
2. __Scale the data__:
You may set the chart's range by setting the __min__ and __max__ properties on the chart's axes. By default, those properties are set to null, which causes the chart to scale itself automatically. By default, series use the chart's main set of axes, __axisX__ and __axisY__; but you may create additional axes and assign those axes to one or more series.
3. __Raise the rendering event__:
At this point, the chart is empty. Event handlers may use __engine__ parameter of the __rendering__ event to add custom elements that will render behind the chart data. This can be used to add background elements such as alarm zones.
4. __Render each series__:
In this step, the chart creates one or more SVG elements to represent each series. The simplest and most efficient chart types are 'Line' and 'Spline', which can usually be represented by a single SVG element. Other chart types require more elements to render bars and symbols. The chart invokes a callback specified by the __itemFormatter__ property to allow customization of specific points in each series. Axes also have an __itemFormatter__ property to allow customization of the axes labels.
5. __Raise the rendered event__:
At this point, the chart has been fully rendered. Event handlers may use the __engine__ parameter of the __rendered__ event to add custom elements that will render above the chart data. This can be used to add elements such as point annotations.

Example: Output the time before and after rendering.

```JavaScript
rendering: function(s, e) {
    var pt = myChart.dataToPoint(0, myChart.axisY.actualMax);
    e.engine.drawString('rendering ' + Date.now(), pt, 'annotation');
    },
rendered: function(s, e) {
    var pt = myChart.dataToPoint(0, myChart.axisY.actualMin);
    e.engine.drawString('rendered ' + Date.now(), pt, 'annotation');
    }
```