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.
This guide contains the following sections:
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:
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;
}
function applyShade(newColor, oldColor) {This function uses the TinyColor library for color conversions, so include the library into your project with the following script:
/* 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);
}
<script
src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js">
</script>
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();
}
}
}
The pie chart should be handled separately as it has a different structure of chart elements.
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;
}
See the full example on JSFiddle.
One more useful example shows how to change the default colors for charts, check it out on JSFiddle. 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: