customizeChartElement(customizeChartElementFunction: Function)

[starting from version: 2.8.8]

This API call allows customizing separate chart elements in Flexmonster Charts. For example, you can add custom attributes or set element colors.

Note that customizeChartElement can be defined in two ways:

1. as a regular API call: flexmonster.customizeChartElement(customizeChartElementFunction);
2. as an initialization parameter: new Flexmonster({customizeChartElement: customizeChartElementFunction, ...})

Parameters

customizeChartElementFunction or null in case you do not need to change anything. The customizeChartElementFunction function has the following signature: customizeChartElementFunction(element: HTMLElement | SVGElement, data: Chart Data Object | Chart Legend Data Object): Object.

Data passed to customizeChartElementFunction:

• element – HTMLElement | SVGElement. The object that contains the current representation of the chart element and through which the chart element representation can be customized.
• data – Chart Data Object | Chart Legend Data Object. Contains information about the chart element.

Example

Highlighting Country United States with the purple color:

function customizeChartElementFunction(element, data) {
    if (data && data.rows && data.rows[0] 
    && data.rows[0].uniqueName == "country.[united states]") {
        element.style.fill = "purple";
    }
}

Try a live sample on JSFiddle.