Customizing the pivot charts

Flexmonster Pivot Charts can be customized and adjusted to the user's needs via CSS or via the customizeChartElement() API call. For example, you can change colors for chart elements, add custom attributes, and so on.

This guide contains several use cases of chart element customization. However, they do not demonstrate all the customization possibilities. To see more examples, visit the Examples page.

Customizing charts via CSS

Change default chart colors

Using the .fm-charts-color-n selector, you can change the default colors for each chart sector. In this example, we specify six colors. The seventh selector is specified with fill: none so that custom colors are repeated if there are more than six chart sectors. Otherwise, Flexmonster would use its own colors.

.fm-charts-color-1 {
  fill: rgb(0, 164, 90) !important;
}

/* CSS rules for chart sectors 2-5 */

.fm-charts-color-6 {
  fill: rgb(206, 151, 230) !important;
}

.fm-charts-color-7 {
  fill: none !important;
}

Live example

Customizing charts via API

The customizeChartElement() method allows you to set a function that will be triggered for each chart element during rendering.

Inside the function, information about the chart element (e.g., the measure associated with the element) can be accessed using the data parameter. Based on that information, you can customize the element's representation or functionality through the element parameter of the function. For example, it is possible to add HTML attributes, classes, inline CSS styles, and change the legend element's label.

Highlight chart elements based on related field members

This example illustrates how chart elements that contain info about a specific field member (e.g., the United States) can be highlighted with a custom color:

Step 1. Define the customizeChartElementFunction() and specify the highlight color and the member that should be highlighted (e.g., the United States):

const pivot = new Flexmonster({
  // Other configs
  // ...
  customizeChartElement: customizeChartElementFunction
});

function customizeChartElementFunction(element, data) {
  let newColor = tinycolor("#1a0019");
  let memberToHighlight = "country.[united states]";
}

Step 2. Create a function to check whether the chart element is related to the necessary 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 3. By default, expanded chart elements have their own shade of the parent element's color. We will create a function to change a shade for each expanded element related to the necessary member (e.g., the United States):

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).toHexString();
}

Note that this function uses the TinyColor library for color conversions. You can include the library in your project with the following script:

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

Step 4. If a chart element is related to the necessary member (e.g., the United States), highlight the element. Note that each chart type should be handled separately because of differences in element structures:

function customizeChartElementFunction(element, data) {
  // Code from step 1

  if (contains(data, memberToHighlight)) {
    switch (data.chartType) {
      case "line":
      case "scatter":
        element.style.stroke = applyShade(newColor, element.style.stroke);
        break;
      case "pie":
        if (element.querySelector("path")) {
          element.querySelector("path").style.fill = applyShade(
            newColor,
            element.querySelector("path").style.fill
          );
        }
        break;
      case "column_line":
        if (element.classList.contains("fm-line") || element.classList.contains("fm-circle")) {
          element.style.stroke = applyShade(newColor, element.style.stroke);
        }
        if (element.classList.contains("fm-bar")) {
          element.style.fill = applyShade(newColor, element.style.fill);
        }
        break;
      default:
        element.style.fill = applyShade(newColor, element.style.fill);
    }
  }
}

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

function customizeChartElementFunction(element, data) {
  // Code from steps 1 and 4

  if (data && data.type === "legend") {
    if (data.member && data.member.uniqueName === memberToHighlight && !data.isExpanded) {
      element.querySelector(".fm-icon-display").style.backgroundColor = 
        applyShade(newColor, data.color);
    }
    if (
      data.tuple &&
      isChild(data.tuple, data.member.uniqueName, memberToHighlight) &&
      !data.isExpanded
    ) {
      element.querySelector(".fm-icon-display").style.backgroundColor = 
        applyShade(newColor, data.color);
    }
  }
}

The isChild() function checks whether a legend element’s member is a child of a specific member.

Live example

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