Need a special offer?Find out if your project fits.
+
All documentation
API reference
  • API Reference for older versions
  • 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

    The customizeChartElementFunction function. If set to null, no customization is applied.

    This function has the following signature: customizeChartElementFunction(element: HTMLElement | SVGElement, data: ChartDataObject | ChartLegendDataObject): Object.
    Data passed to the customizeChartElementFunction:

    Parameter/Type Description
    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 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()