Hello,
Here is another solution here.
const opts = {
targetValueDim: '[Commerce.Age Range]',
targetColor: '#156082',
otherColor: '#e97132',
otherValue: 'Competitor'
};
const tooltipHtml = `<div class="cartesian-tooltip"><div class="cartesian-tooltip-values" ng-repeat="item in model.points"><div class="cartesian-tooltip-seriesName">{{item.seriesName | unescape}}</div><div class="cartesian-tooltip-singleLineValue" data-ng-style="{color: item.valueColor}"><div class="cartesian-tooltip-value">{{item.value | unescape}}</div><div class="cartesian-tooltip-percentage" ng-class="{disabled: item.hasExcessiveSeries}" data-ng-show="item.showPercentage">/ {{item.percentage}}</div><div class="cartesian-tooltip-disclaimer" data-ng-show="item.hasExcessiveSeries">To view as a percentage, filter the categories to contain no more than 50 results.</div></div></div></div>`;
widget.on('beforeviewloaded', (scope, args) => {
const { targetValueDim, targetColor, otherColor, otherValue } = opts;
const targetValueFilter = widget.dashboard.filters.item(true, targetValueDim);
try {
const targetValues = $$get(targetValueFilter, "jaql.filter.members");
args.options.series[0].data.forEach((point) => {
const isTarget = targetValues.includes(point.selectionData[0]);
point.color = isTarget ? targetColor : otherColor;
if (!isTarget) {
point.selectionData[0] = otherValue;
}
});
args.options.xAxis.categories = args.options.xAxis.categories.map((category) => {
return targetValues.includes(category) ? category : otherValue;
});
} catch(err) {
console.error("Error processing filters: ", err);
}
args.options.plotOptions.line.dataLabels.enabled = false
});
widget.on('beforedatapointtooltip', (scope, args) => {
args.template = tooltipHtml;
});
Kind regards