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. Learn more in this guide: Customizing the pivot charts.

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: ChartDataObject | ChartLegendDataObject): 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 – ChartDataObject | ChartLegendDataObject. 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.

See also

Customizing the pivot charts
customizeCell()
customizeContextMenu()