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:
flexmonster.customizeChartElement(customizeChartElementFunction)
;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 chart elements containing info about the United States regardless of their position:
function customizeChartElementFunction(element, data) {
let newColor = "purple";
/* contains() is a function that checks whether
a given member is present in rows or column
*/
if (contains(data, "country.[united states]")) {
/* highlight United States in rows or columns */
if (data.chartType == "pie") {
if (element.querySelector('path')) {
element.querySelector('path').style.fill = newColor;
}
} else {
element.style.fill = newColor;
}
}
/* change the legend item color for United States */
if (data && data.type == 'legend') {
if (data.member && !data.isExpanded
&& data.member.uniqueName == "country.[united states]" ) {
element.querySelector(".fm-icon-display").style
.backgroundColor = newColor;
}
/* isChild() is a function that checks whether
the current member is a child of the given member
*/
if (data.tuple && isChild(data.tuple, data.member.uniqueName,
"country.[united states]") && !data.isExpanded) {
element.querySelector(".fm-icon-display").style
.backgroundColor = newColor;
}
}
}
See the full code on JSFiddle.