Customizing the pivot charts

Flexmonster Pivot Charts can be customized and adjusted to the user's needs. The customizeChartElement API call allows setting colors for chart elements, adding custom attributes, and so on.

About the customizeChartElement method

The customizeChartElement method is triggered for each chart element during the rendering. As a parameter, it takes customizeChartElementFunction which has two parameters:

• Either the HTML or SVG element, which contains the current representation of the chart element and through which the element's representation can be customized.
• The ChartDataObject or the ChartLegendDataObject containing information about the chart element.

To learn more about the customizeChartElement API call and its parameters, refer to the documentation.

Using customizeChartElement

This example illustrates how to highlight the chart elements containing info about the United States regardless of their position:

Step 1. Create a function to check whether the data contains the given member:

function contains(data, memberName) {
  if (data && data.rows) {
    for (let i = 0; i < data.rows.length; i++) {
      if (data.rows[i].uniqueName == memberName) {
        return true;
      }
    }
  }
  if (data && data.columns) {
    for (let i = 0; i < data.columns.length; i++) {
      if (data.columns[i].uniqueName == memberName) {
        return true;
      }
    }
  }
  return false;
}

Step 2. By default, all the hierarchy's child members have their own color shade when the chart is expanded. We will create a function to prepare a custom shade for each child member of the United States. This function will retrieve a lightness of the element's default color, apply it to the custom color, and return a resulting shade:

function applyShade(newColor, oldColor) {
    /* Get the lightness of the default color */
    /* Here we divide it by 2 to adjust the default lightness
    and get a darker color as a result */
    let colorLightness = tinycolor(oldColor).toHsl().l/2;
  
    /* Apply the lightness to the new color */ 
    let result = newColor.toHsl();
    result.l = colorLightness;
  
    /* Return the created color shade */ 
    return tinycolor(result);
}

This function uses the TinyColor library for color conversions, so include the library into your project with the following script:

<script
 src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js">
</script> 

Step 3. If the data contains the United States member, color the corresponding chart element with a certain shade of purple:

function customizeChartElementFunction(element, data) {
  let newColor = tinycolor("#1a0019"); 
  if (contains(data, "country.[united states]")) {
    if (data.chartType == "pie") {
      if (element.querySelector('path')) {
        element.querySelector('path').style.fill = applyShade(newColor,
        element.querySelector('path').style.fill).toRgbString();
      }                        
    }                    
    else {
      element.style.fill = applyShade(newColor, element.style.fill)
      .toRgbString();
    }    
  }
}

Note The pie chart should be handled separately as it has a different structure of chart elements.

Step 4. Update the chart legend item's color:

function customizeChartElementFunction(element, data) {
  // code from step 2
  if (data && data.type == 'legend') {
    if (data.member && data.member.uniqueName == "country.[united states]" 
    && !data.isExpanded) {
      element.querySelector(".fm-icon-display").style
      .backgroundColor = applyShade(newColor, data.color).toHexString();
    }
    if (data.tuple && isChild(data.tuple, data.member.uniqueName, 
    "country.[united states]") && !data.isExpanded) {
      element.querySelector(".fm-icon-display").style
      .backgroundColor = applyShade(newColor, data.color).toHexString();
    }
  }
}

The isChild function checks whether the current member is a child of the given member (in our case, of the United States member). Its definition is the following:

function isChild(tuple, member, parentMember) {
    let i = 0;
    while (tuple[i].uniqueName != member) {
        if (tuple[i].uniqueName == parentMember) {
            return true;
        }
        i++;
    }
    return false;
}

Live example

Changing default colors for charts

One more useful example shows how to change the default colors for charts Live example.

We use .fm-charts-color-n to set the color for the nth chart sector. In this example, we specify six colors. The seventh sector is specified with fill: none. This trick is used so that custom colors are repeated if there are more than six chart sectors. If the seventh sector was not specified, Flexmonster would use its own colors.

What's next?

You may be interested in the following articles:

• How to customize the grid
• How to customize the Toolbar
• How to apply a CSS theme
• How to customize the context menu