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.
The customizeChartElement method is triggered for each chart element during the rendering. As a parameter, it takes customizeChartElementFunction which has two parameters:
To learn more about the customizeChartElement API call and its parameters, refer to the documentation.
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;
}
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.
You may be interested in the following articles: