Need a special offer?Find out if your project fits.
All documentation
  • 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, ...}).


    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:

    HTMLElement | SVGElement
    The object that contains the current representation of the chart element and through which the chart element representation can be customized.
    ChartDataObject | ChartLegendDataObject
    Contains information about the chart element.


    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 {
 = newColor;
      /* change the legend item color for the given member */
      if (data && data.type == 'legend') {
        if (data.member && data.member.uniqueName == memberToHighlight &&
          !data.isExpanded) {
            .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) {
            .backgroundColor = newColor;

    See the full code on JSFiddle.

    See also

    Customizing the pivot charts