Pivot chart script not working

Hi ,

I am trying to manipulate the pivot chart font size, color and other aesthetic elements using one the script I found on the community posts. However, the script is not working as I am also trying to replace the cell values with 'Tick marks' and 'Cross'. I am not sure how to place this scripts together to make it work. I have attached the script  and screenshot of the widget for your reference.

 

--------------------------------------------------------------------------

const myTarget = {
type: ['value'],
values: [
{
title:[ 'Personal Face to Face','Direct','Personal Remote','Digital Pull','Digital Push','Peer Interaction'] // put here desired column
}
]
};

widget.transformPivot(myTarget, function(metadata, cell) {
if (cell.value == 1) {
cell.content = "✔";
}
else {
cell.content = "✖";
}
});

 

prism.jumpToDashboard(widget, { displayDashboardsPane:false, displayFilterPane :false});

 

 

/*widget.on("ready",function(w, args) {
var headerBgColor = '#a9aa40'; //Header background
var headerFontColor = '#F7F3F2'; //Header Font Color
var footBgColor = '#44546A'; // Pivot Foot (Totals)
var footFontColor = '#F2F3F2'; // Pivot Column (dims)
var colFontColor = '#5690a2';
// Style
var $jx = $(".p-grand-total-head,.p-dim-head,.p-dim-member-head,.p-measure-head", element);
$jx.css('font-size' , '12px');
$jx.css('font-weight' , 'bold');
$jx.css('color' , headerFontColor);
$jx.css('background-color' , headerBgColor);
$jx.css('text-align' , 'center');
$jx.css('vertical-align' , 'middle');
//center values and col
$(".p-value", element).css('text-align', 'center');
$(".p-dim-head", element).css('text-align', 'left');
// row totals
var $jx= $(".p-total-row-val,.p-total-row-head", element);
$jx.css('font-size' , '12px');
$jx.css('font-weight' , 'bold');
$jx.css('color' , footFontColor);
$jx.css('background-color' , footBgColor);
$jx.css('border-top', 'none');
// col
var $jx = $(".p-dim-member", element);
$jx.css('font-size' , '10px');
$jx.css('font-weight' , 'bold');
$jx.css('color' , colFontColor);
$jx.css('text-align' , 'left');
var $jx = $(".p-value", element);
$jx.css('font-size' , '10px');
// boarders
var $jx = $("[fidx]", element);
$jx.css('border-bottom', 'thin solid ' + colFontColor);
$jx.css('border-right', 'thin solid ' + colFontColor);
})*/