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 chart elements containing info about the United States regardless of their position:

function customizeChartElementFunction(element, data) {
  // set a new color
  let newColor = "purple";

  // highlight United States in rows 
  if (data && data.rows && data.rows[0] 
  && data.rows[0].uniqueName == "country.[united states]") {
    element.style.fill = newColor;
  }
    
  // highlight United States in columns
  if (data && data.columns && data.columns[0] 
  && data.columns[0].uniqueName == "country.[united states]") {
    element.style.fill = newColor;
  }
    
  // change the legend item color for United States
  if (data && data.member
  && data.member.uniqueName == "country.[united states]") {
    element.querySelector("#fm-icon-display").style.backgroundColor = newColor;
  }
}

Try a live sample on JSFiddle.