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.

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 – Function. It has the following signature: customizeChartElementFunction(element: HTMLElement | SVGElement, data: ChartDataObject | ChartLegendDataObject): Object.
  Data passed to the 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.
  If the customizeChartElementFunction is set to null, no customization is applied.

Example

Highlighting chart elements containing info about a certain member regardless of their position:

function customizeChartElementFunction(element, data) {
  let newColor = "purple";
  let memberToHighlight = "country.[united states]";
  
  /* contains() is a function that checks whether
     a given member is present in rows or column */
  if (contains(data, memberToHighlight)) {
  /* highlight the given member 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 the given member */
  if (data && data.type == 'legend') {
    if (data.member && data.member.uniqueName == memberToHighlight &&
      !data.isExpanded) {
      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,
        memberToHighlight) && !data.isExpanded) {
      element.querySelector(".fm-icon-display").style
        .backgroundColor = newColor;
    }
  }
}

See the full code on JSFiddle.

See also

Customizing the pivot charts
customizeCell()
customizeContextMenu()