customizeChartElement

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) {
  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.