Widget Scripts: Customize Visual Styles

⏱️ 5 minute read

Here are a few ready-to-use widget scripts to customize the visual style of your widgets.

Replace the variables highlighted in bold with the appropriate values for your use case.

To appoint colours, you can use:
- the name of the colour
- the colour's HTML hex code
- the RGBA (or RGB) code

• Change the colour of the background and axis labels in charts
• Change the colour of the header row in pivot tables
• Change the colour of bars/columns/slices in charts
• Fully customize bars/columns/slices in charts
• Add coloured labels in tables
• Add an image in the background of charts
• Convert chart to 3D

Change the colour of the background and axis labels in charts

widget.on('processresult',function(se,args){
args.result.chart.backgroundColor = '#140082' //background colour
args.result.xAxis.labels.style.color = 'orange' //x-axis font colour
args.result.yAxis[0].labels.style.color = 'rgba(60, 179, 113, 1)' //y-axis font colour
})

widget.transformPivot({
rowIndex: ['member']
}, function setCellStyle(metadata, cell) {
if(metadata.rowIndex == 0){
cell.style.color = 'black';   //font colour
cell.style.fontWeight = 'bold';  //font style
cell.style.background = 'linear-gradient(0deg, rgba(83,199,251,1) 0%, rgba(243,251,251,1) 100%)';   //background colour (with gradient)
}
});

Change the colour of bars/columns/slices in charts

var colorList = {
// specify the label names and colours
'label name 1': '#d46c3f',
'label name 2': '#88b830',
'label name 3': '#3071b8',
'label name 4': '#7a30b8',
'label name 5': '#b83086'
}
widget.on('processresult',function(se,args){
$.each(args.result.series[0].data, function(i, v){
v.color = colorList[v.selectionData[0]]
})
})

Fully customize bars/columns/slices in charts

widget.on('processresult', function(se, args) {
   const colorMap = {

// specify label names and colours
       'label name 1': '#d46c3f',
       'label name 2': '#88b830',
       'label name 3': '#3071b8',
       'label name 4': '#7a30b8'
       'label name 5': '#b83086'
   };

   args.result.series.forEach(function(series, sIndex) {
       series.shadow = {

// specify shadow parameters
           color: 'rgba(0, 0, 0, 0.3)',
           offsetX: 3,
           offsetY: 10,
           width: 10
       };

       series.data.forEach(function(point) {
           const category = point.selectionData?.[0] || 'N/A';
           const baseColor = colorMap[category] || Highcharts.getOptions().colors[sIndex % 10];

           const gradient = {

// specify gradient fill parameters
               linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
               stops: [
                   [0, Highcharts.color(baseColor).brighten(0.1).get('rgb')],
                   [1, Highcharts.color(baseColor).brighten(-0.1).get('rgb')]
               ]
           };

           point.color = gradient;
           point.borderColor = Highcharts.color(baseColor).brighten(-0.2).get('rgb');
           point.borderWidth = 1;

       });
   });
});

widget.on('beforeviewloaded', function(w, args) {
   args.options.plotOptions = {
       column: {

// specify border radius
           borderRadius: 4,
           dataLabels: {
               enabled: false 
           },
           states: {
               hover: {
                   enabled: true,

// specify hover parameter
                   brightness: 0.15,
                   borderColor: '#9D9B9B',
                   borderWidth: 2
               }
           }
       }
   };

   args.options.tooltip = {
       enabled: true,
       shared: false,
       useHTML: true,

// specify tooltip parameters
       backgroundColor: 'rgba(255, 255, 255, 0.95)',
       borderColor: '#999',
       borderRadius: 20,
       shadow: true,
       style: {
           color: '#000',
           fontSize: '13px'
       },
       formatter: function () {
           return `<b>${this.series.name}</b><br>${this.key}: <b>${this.y}</b>`;
       }
   };
}); 

Add coloured labels in tables

widget.on('domready', function(se, ev){
let columnsIndex = 2   // specify the column number
let itemStyleMapping = {
// specify the category name, background and font colours, the padding and the border radius
'category1':'background-color:#B22222; color:white; padding: 2px 8px; border-radius:15px',
'category2':'background-color:#ff8181; color:white; padding: 2px 8px; border-radius:15px',
'category3':'background-color:#FFD166; color:white; padding: 2px 8px; border-radius:15px',
'category4':'background-color:#90EE90; color:white; padding: 2px 8px; border-radius:15px',
'category5':'background-color:#2E8B57; color:white; padding: 2px 8px; border-radius:15px',
"": 'background-color:#90EE90; color:white; padding: 2px 8px; border-radius:15px',
}
const elementToObserve = $('table tbody', element)[0];
// This applies styles after a slight delay to ensure the table is fully rendered
setTimeout(function() {
$(elementToObserve).find(`tr td:nth-child(${columnsIndex})`).each(function(index, value){
var label = $(this).text()
if(label in itemStyleMapping)
{
$(this).text('')
$(this).prepend(`<mark style="${itemStyleMapping[label]}">${label}</mark>`)
} 
})
}, 10);  // Adjust the timeout as needed
const observer = new MutationObserver(function(e) {
for(const m of e) {
if (m.type === 'childList') {
$.each(m.addedNodes, function(index, value){
elementObj = $(value).find('td:nth-child(3)')
var label = elementObj.text()
if(label in itemStyleMapping)
{
elementObj.text('')
elementObj.prepend(`<mark style="${itemStyleMapping[label]}">${label}</mark>`)
}
})
}
}
})
observer.observe(elementToObserve, {subtree: true, childList: true});
})

Rendition example:

Add an image in the background of charts

widget.on('processresult', function(se, ev) {

//specify image URL
   const imageURL = 'https://thumbs.dreamstime.com/b/sheet-stained-lined-paper-12053332.jpg?w=768';
      ev.result.chart.plotBackgroundImage = imageURL;

   // specify bar/column style
   $.each(ev.result.series, function(index, value){
       value.borderWidth = 2;
       value.borderColor = value.color;
       value.borderRadius = 2;
       value.color = Highcharts.color(value.color).setOpacity(0.9).get('rgba');
   });

   ev.result.chart.events = {
       load: function () {
           const chart = this;
           chart.renderer.rect(0, 0, chart.chartWidth, chart.chartHeight)
               .attr({
                   fill: 'rgba(255, 255, 255, 0.1)',    //adjust alpha for desired transparency
                   zIndex: 1
               })
               .add();
       }
   };
}); 

Convert chart to 3D

widget.on('processresult', function(se, ev){
ev.result.chart.options3d = {
enabled: true,
   //specify the alpha, beta, depth, view distance, column depth, border width
alpha: 25,
beta: 25,
depth: 250,
viewDistance: 25
}
ev.result.plotOptions.column.depth = 50
ev.result.plotOptions.column.borderWidth = 0.2
})

widget.on('processresult', function(se, ev){
ev.result.chart.options3d = {
            enabled: true,
 //specify the alpha, beta, depth, view distance, bar depth, border width
            alpha: 15,
            beta: 15,
            depth: 250,
            viewDistance: 25
        }
ev.result.plotOptions.bar.depth = 35
ev.result.plotOptions.bar.borderWidth = 0.2 
})

widget.on('processresult', function(se, ev){
ev.result.chart.options3d = {
            enabled: true,
 //specify the alpha, beta, depth
            alpha: 45,
            beta: 0
        }
ev.result.plotOptions.pie.depth = 50 
})

Rendition example:

Related articles

• How to Customize Advanced Analytics Reports with Widget Scripts
• Reorder or Remove Elements
• Add Textual Elements
• Remove Elements
• Conditional Formatting
• Add Buttons